Question

下面的代码中没有删除边框，即图像精灵。我尝试了一些方法来使用样式和边框0删除边框，但没有用。

<style>
img.home{width:40px;height:32px;
background:url(share.png) 0 0;
border-style: none;}
img.next{width:40px;
height:32px;background:url(share.png) -36px 0;
border-style:none;}
</style>
<a href="http://www.yahoo.com/">
<img class="home" border="0">
</a>
<img class="next" border="0"/>

JSFIDDLE

Answer 1

图像带有默认边框，只有在下载图像时才会消失。该图像来自图像的src属性。如果没有设置src，那么将不会下载图像，并且边框将永远存在 - 您的情况完全正确。

普通的img标签如下所示：

<img src="/something.jpg" />

你的看起来像这样：

<img />

您正在通过css的背景图片添加图片。不应该这样做。您可以添加背景图像，但通常用于其他目的。（查看底部的旁边）。

尝试删除背景图像并将图像位置放在图像的src属性上。像这样：

<img class="next" src="/share.png" />

你会看到图像现在没有边框。

<强>除了将背景图像添加到img元素时，通常会在未设置img src时提供占位符图像。想想博客评论部分的头像。

同时在创建精灵时，您可以使用div s p s em等等。请记住，background-image可以应用于任何元素！

Answer 2

假设您的html标记为<img class="somthing" />，并且在类“某事物”中您定义了图像的背景位置。

当您从图像精灵中更精确地选择特定图像时，图像所在的特定位置。使用css中的背景位置获取图像时，您的课程是合适的。

删除边框的简单解决方案只是将img标记设为div。

如果您根据背景位置获取图片，为什么需要使用img标记。

只需将html写为...... <div class="next" ..>

即可

Answer 3

如果你不使用外部文件，你可以使用base64非常小的透明图像

<img class="next"  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

Answer 4

发现它，JOPLOmacedo是对的，但您不必删除背景，只需使用src标记即可。 JSFIDDLE。（对不起图像，但我需要它们来测试src）

HTML：

<a href="http://www.yahoo.com/">
<img class="home" src="http://jsfiddle.net/img/logo.png" border="0"/>
 </a>
<img class="next" src="http://jsfiddle.net/img/social-icons/facebook_16.png" border="0"/>

CSS：

img.home{width:40px;height:32px;
border: none; background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) 0 0;}
img.next{width:40px;
height:32px;
border:none; float: right;
background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) -36 0;}

如何删除图像精灵中的边框

4 个答案: