如何去除围绕背景图像的灰色边框？

我遇到了一个有趣的问题，在下面的代码行：如何去除围绕背景图像的灰色边框？

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

在Safari（至少），灰色边框包围300x50px区域。添加style =“border：none;”不会删除它。有任何想法吗？

谢谢。迈克

来源

2009-07-02 Michael Swarts

尝试 “边界：0;” – 2009-07-02 07:47:02

不起作用。如果我用div标签替换img标签，边框不会出现......是否应该这样做？ – 2009-07-02 07:51:18

您是否使用javascript动态更改页面的CSS？ – 2009-07-02 07:51:28

因此，您有一个img元素没有src属性，但它确实应用了背景图像样式。

我想说，如果你指定了一个src属性，那么灰色边框就是图像所在位置的'占位符'。

如果您不想使用“前景”图片，那么请勿使用img标签 - 您已经声明更改为div可以解决问题，为什么不使用该解决方案？

来源

2009-07-02 07:55:26 belugabob

试图将边框设置为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单独的，因为它违背，否则点的一部分虽然。

来源

2009-07-02 07:46:25 Damien

尝试设置这个代替的背景图像：

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

来源

2009-07-02 07:47:47 Wolfr

尝试<img border="0" />

这应该做的伎俩。

编辑

对不起，我看到你正在做的事情非常错误的..你在一个img标签..这并没有真正意义设置背景图片...而不是

一个imagetag使用

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

，或者如果它是你在这方面需要一个像使用

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

来源

2009-07-02 07:48:07

如果发生只有Safari，而不是在其他浏览器尝试重置使用的东西，浏览器CSS像YUI CSS RESET

正确的方式，它是将CSS从代码中分离出来，并具有对图像的CSS类。

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

并在css中定义了什么className的样子。，className {border：0;}

来源

2009-07-02 07:50:24

img标签需要一个src属性。

例如，

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

但是IMG仅用于内联（前景）图像。如果你真的想要的形象是什么背景，你需要将样式应用到你希望它是背景的实际元素：

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

来源

2009-07-02 07:59:47 Geerad

您还可以添加一个空白图像作为占位符：

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

这应该做的伎俩！

来源

2010-08-18 21:04:18 user424540

试试这个，它为我工作（在铬和Safari）。这不是边界，但影子，所以请将此行添加到标签：

{-webkit-box-shadow:none;}

希望它为你工作了。

来源

2011-03-21 22:13:58

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

在您Resources/bar.png是一个精灵的形式前景图像的情况下，是有意义的使用img标签，而不是div。当你这样做时，你可以使用一个1px的透明图像文件作为src属性，然后像这样设置背景图像。

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

在这里你设置x和y是在你想要的形象在启动精灵的像素位置。这种技术也是在解释说：http://www.w3schools.com/css/css_image_sprites.asp

当然这种方法的缺点是，有一个额外的要求，但你总是使用相同的透明图像为您精灵这不是一个巨大的交易。

来源

2012-01-13 09:35:01

其实，这似乎在Chrome至少工作：

img { 
content: ""; 
}

来源

2012-09-13 18:50:38

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

<img id="myImage">

我的修复是对初始图像标签CSS更新到

#myImage { 
    display:none; 
}

然后使用jQuery来显示它一旦其内容加载。

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

来源

2014-02-20 13:45:47 wolfstevent

下面将使用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用于数据：图像尖端

来源

2016-04-02 00:13:13 rainabba

如何去除围绕背景图像的灰色边框？

回答

相关问题