如何删除背景图像周围的灰色边框？答案

【问题标题】：How do I remove the gray border that surrounds background images?如何删除背景图像周围的灰色边框？
【发布时间】：2009-07-02 07:44:32
【问题描述】：

我在以下代码行中遇到了一个有趣的问题：

  <img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>

在 Safari 中（至少），灰色边框围绕着 300x50 像素的区域。添加 style="border: none;"不删除它。有什么想法吗？

谢谢。迈克

【问题讨论】：

不起作用。如果我用 div 标签替换 img 标签，边框不会出现……这是应该怎么做的？
你是否使用javascript动态改变页面的css？
napster 是对的。你这样做是不对的。背景是图像的 css 属性。查看我的示例以获取正确的图像参数
来自 css 技巧，1x1 base 64 透明 img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
当没有src 出现时，浏览器会自动添加这些边框。 @neaumusic 你的技巧为我节省了一个小时的工作时间。

标签： javascript html css

【解决方案1】：

所以，你有一个没有 src 属性的 img 元素，但它确实应用了背景图像样式。

如果您指定了 src 属性，我会说灰色边框是图像所在位置的“占位符”。

如果您不想要“前景”图像，则不要使用 img 标签 - 您已经说过更改为 div 可以解决问题，为什么不使用该解决方案？

【讨论】：

正确。我想这正是它。我已经使用 div 修复了它。我没有意识到 img 标签仅适用于前景图像。但是，是的，据我所知，这就是答案。
很高兴，我能帮上忙 - 您是否有机会将我的答案标记为已接受？
很遗憾，CSS3 强制用户使用这种丑陋的默认边框。这就是为什么我尽量避免使用像“img”这样糟糕的预制标签。
HTML 应该是描述性的，如果你想用 CSS 管理你的图片，你不应该改变你的 html...
有一个解决方案类，添加属性 alt 和 src empty 时灰色边框会消失。

【解决方案2】：

您还可以添加空白图片作为占位符：

img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='

这应该可以解决问题！

【讨论】：

或者更小的图片（GIF而不是PNG）：<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
为我工作，谢谢！但是@binnyb 的 gif 建议不起作用。

【解决方案3】：

实际上，这似乎至少在 Chrome 上有效：

img {
 content: "";
}

【讨论】：

这可以解决问题（与display: inline-block 一起保持尺寸），但即使源图像没有损坏，它也会保留空图像......
您的综合答案是 Chrome 的解决方案。然而，在 FF 中不仅有边框，而且还有破碎的图像图标。兼容性.... :-(
对于 Chome 59，边框仍然显示为两者，但 src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==' hack 仍然可以修复它。

【解决方案4】：

以下将使用 css 将 src 设置为一个微小的透明图像，这解决了 src 属性问题，同时保持图像控制：

content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')

我的总体方法是在我的 reset.css 中定义以下内容，然后使用一个类来提供实际图像并对其进行控制。它的行为就像一个 img，但完全是 css 控制的。

img {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  *
  vertical-align: auto;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

img:not([src]) {
    content:             url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

.myuniqueimage {
    background-image: url('../images/foobar.png');
    height: 240px;
}

感谢 +programming_historian 和 +binnyb 提供数据：图片提示

【讨论】：

【解决方案5】：

试试<img border="0" />

这应该可以解决问题。

编辑

对不起，我看到你做错了什么..你在 img 标签上设置背景图像..这真的没有意义......

使用

代替图像标签

<div style="background-image: url(Resources/bar.png);"></div>

或者如果它是您想要在该区域使用的图像，请使用

<img src="Resources/bar.png" border="0" Width="500px" Height="300" />

【讨论】：

【解决方案6】：

img 标签需要一个 src 属性。

例如，

<img src="Resources/bar.png" alt="bar" width="300" height="50" />

但 img 仅适用于内联（前景）图像。如果您确实希望图像成为某物的背景，则需要将样式应用于您希望它成为背景的实际元素：

<div style="background-image:url(Resources/bar.png);">...</div>

【讨论】：

【解决方案7】：

尝试将边框设置为 0px？

编辑：是的，您应该在另一个类的 css 中有背景图像。在 div 或 body 标签中执行此操作（取决于您尝试执行的操作）将起作用。它还会阻止背景图像本身成为一个元素，这会破坏页面上元素的流动并弄乱你的定位。

<div class="myDivClass">content to go on TOP of the background image</div>

CSS：

.myDiVClass
{
background: url(Resources/bar.png)  no-repeat;
width: 300px; 
height: 50px;
}

或

 <div class="myDivClass" style="background: url(Resources/bar.png)  no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>

最好将 CSS 分开，否则会导致部分问题。

【讨论】：

是的。不工作。它看起来像一个边框，但它看起来像别的东西。

【解决方案8】：

我有一个类似的问题，我的初始 HTML 有一个没有源的 IMAGE 标记。我的 Javascript 确定了要显示的图像。然而，在加载图像之前，用户看到了占位符框。

<img id="myImage">

我的解决方法是将初始图像标签 CSS 更新为

#myImage {
  display:none;
}

然后在加载内容后使用 JQuery 显示它。

$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);

【讨论】：

【解决方案9】：

尝试设置这个而不是背景图像：

background: url(Resources/bar.png) no-repeat;

【讨论】：

【解决方案10】：

如果仅在 Safari 中发生而不在其他浏览器中发生，请尝试使用 YUI CSS RESET 之类的内容重置浏览器 CSS

正确的方法是将 css 与代码分开并为图像创建一个 CSS 类。

<img src='whatever.png' alt='whatever' class='className' />

并在 css 中定义 className 的样子。 ,className {border:0;}

【讨论】：

没有检查其他浏览器，但我想我只需要使用 div 标签。解决方法是，但我认为应该使用 img 标签来完成......

【解决方案11】：

我知道这是一个老问题，但我发现这很有用..

如果您的Resources/bar.png 是精灵形式的前景图像，则使用img 标签而不是div 是有意义的。当你这样做时，有一个用于src 属性的 1px 透明图像文件会有所帮助，然后像在此处一样设置背景图像，例如

    <img src="transparent.png" style="background: url(sprite.png) x y" />

在这里，您将x 和y 设置为您希望图像开始的精灵上的像素位置。这种技术也在：http://www.w3schools.com/css/css_image_sprites.asp

当然，这样做的缺点是有一个额外的请求，但如果你总是为你的精灵使用相同的透明图像，这并不是什么大问题。

【讨论】：

这种对我有用，transparent.png，背景图像，设置高度和宽度，因此图像被剪裁（这是我的需要）并且阴影消失了

【解决方案12】：

试试这个，它对我有用（在 chrome 和 Safari 上）。那不是边框而是阴影，所以请将此行添加到标签中：

{-webkit-box-shadow:none;}

希望它也对你有用。

【讨论】：

【解决方案13】：

如果您在 css 中用作背景图像，则向您的图像组件添加一个空的 src="" 正方形将消失

<image class=${styles.moneyIcon} src="" ></image>

【讨论】：