【问题标题】:Remove white border from image从图像中删除白色边框
【发布时间】:2014-07-14 02:47:37
【问题描述】:

尝试过的边框:无;无济于事。

#header .bg
{
float: right;
max-width: 100%;
max-height: 100%;
border: none;
}

现在是 html...

<body>
<div id="header">
<img class="bg" src="http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-    Beach-Landscape-HD.png"> 
</div>

【问题讨论】:

  • 为什么图片名称之间有空格?在图像上看不到任何白色边框。看一看。 jsbin.com/tutiwipo/1/edit 。似乎其他一些 css 样式重叠。
  • 你需要这样的东西吗:jsfiddle.net/WMQVw
  • 你说的是什么白边?我认为您没有提供足够的代码和/或解释来诊断您的问题。 jsfiddle.net/LX6g9/1
  • @AppleBud 你忘了在你的代码上关闭&lt;/div&gt;
  • @KheemaPandey,感谢您的指出。 :) .

标签: html css image border


【解决方案1】:

你为什么不使用:

<div id="header" style="background-size:cover; background-image:url(http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-Beach-Landscape-HD.png);">

相反? 或者,甚至更好:

<div id="header"></div>

CSS:

#header {
    background-size: cover;
    background-image: url(http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-Beach-Landscape-HD.png);
}

【讨论】:

  • 我猜 OP 想在图像上显示轮播效果。这就是他使用&lt;img&gt;标签的原因。
【解决方案2】:

示例,但在 body 标记中包含图像:Live version

HTML:

<body>
   <div id="header">
   </div>
</body>

CSS:

body
{
  background-image: url(http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-Beach-Landscape-HD.png);
  background-repeat: no-repeat;
  background-position: top left
}

【讨论】:

  • 可能有使用&lt;img&gt;元素的目的。
  • @KheemaPandey 是的,但问题看起来他需要一个无缝的背景图像。这就是我删除&lt;img&gt; 并通过CSS 实现背景的原因。
【解决方案3】:

img 标签是一个替换元素,这意味着默认情况下它的display 设置为inline,这也意味着line-height 值会影响它,这可能就是你有负空间的原因围绕它。

解决方案:在您的img 上添加display: block; 属性。

此外,在您的特定情况下,如果您不使用 CSS Normalize,您应该使用它 - 这将消除由任何其他元素(即主体)引起的任何额外间距。

【讨论】:

    猜你喜欢
    • 2021-11-05
    • 1970-01-01
    • 2012-09-14
    • 2015-05-06
    • 2017-10-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多