如何去除围绕背景图像的灰色边框？
我在下面这行代码中遇到了一个有趣的问题：
<img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/> 在Safari（至less）中，围绕300x50px区域的灰色边框。 添加style =“border：none;” 不会删除它。 有任何想法吗？
谢谢。 麦克风
所以，你有一个没有src属性的img元素，但是它有一个应用的背景图像样式。
如果你指定了一个src属性，那么灰色的边框就是图像所在的位置。
如果您不想使用“前景”图片，那么请不要使用img标签 – 您已经说过，更改为div可以解决问题，为什么不使用该解决scheme呢？
您还可以添加空白图像作为占位符：
img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
这应该做的伎俩！
其实，这似乎至less在Chrome上工作：
img { content: ""; }
下面将使用CSS来设置src为一个微小的透明图像，它解决了src属性问题，同时保持从图像的控制：
content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
我的总体方法是在我的reset.css中定义以下内容，然后使用一个类来提供实际的图像并对其进行控制。 这performance就像一个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('..http://img.dovov.comfoobar.png'); height: 240px; }
感谢+ programming_historian和+ binnyb的数据：图像提示
尝试<img border="0" />
这应该够了吧。
编辑
对不起，我看到你正在做一些非常错误的事情..你正在设置一个img标签的背景图片..这并没有什么意义…
而不是一个图片标签使用一个
<div style="background-image: url(Resources/bar.png);"></div>
或者如果这是你想在该地区使用的图像
<img src="Resources/bar.png" border="0" Width="500px" Height="300" />
img标签需要一个src属性。
例如，
<img src="Resources/bar.png" alt="bar" width="300" height="50" />
但img只适用于内联（前景）图像。 如果你真的想把图像作为背景的东西，你需要将样式应用到你想要的背景：
<div style="background-image:url(Resources/bar.png);">...</div>
试图将边框设置为0px？
编辑：是的，你的意思是在另一个类的CSS的背景图像。 做在div或身体标签（取决于你想要做什么）将工作。 它也会阻止背景图像本身的一个元素，这会影响页面元素的stream动，并使你的定位变得困难。
<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>
尽pipe如此，保持CSS的分离效果是最好的，否则就会失败。
尝试设置而不是background-image：
background: url(Resources/bar.png) no-repeat;
如果仅在Safari中发生，而不是在其他浏览器中尝试使用类似YUI CSS RESET的方式重置浏览器CSS
正确的方法是将css从代码中分离出来，并为图像创build一个CSS类。
<img src='whatever.png' alt='whatever' class='className' />
并在CSS中定义什么className看起来像。 ，className {border：0;}
我知道这是一个老问题，但我发现这个有用的..
在Resources/bar.png是精灵forms的前景图像的情况下，使用img标签而不是div是有意义的。 当你这样做，它可以帮助有一个1px的透明图像文件，你使用的src属性，然后设置背景图像，你在这里做例如
<img src="transparent.png" style="background: url(sprite.png) xy" />
在这里，您将x和y设置为您想要图像开始的精灵的像素位置。 这种技术也在http://www.w3schools.com/css/css_image_sprites.asp解释;
当然，这样做的缺点是有一个额外的请求，但它总是使用相同的透明图像为你精灵这并不是一个巨大的交易。
试试这个，它为我工作（在铬和Safari）。 这不是边界，而是阴影，所以请将这一行添加到标签：
{-webkit-box-shadow:none;}
希望它也适用于你。
我有一个类似的问题，我最初的HTML有一个没有源的IMAGE标记。 我的Javascript确定要显示哪个图像。 但是，在加载图像之前，用户看到了占位符框。
<img id="myImage">
我的修复是更新最初的图像标签CSS
#myImage { display:none; }
然后使用JQuery在内容加载后显示它。
$('#myImage') .attr('src', "/img/" + dynamicImage + '.png') .fadeTo(500, 1);
