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

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元素之外,通常在没有src设置img时提供占位符图像.想想博客评论部分的头像.

此外 当创建一个精灵,你可以用div小号p小号em小号等等记住,background-image可以应用到任何元素!