如何删除图像精灵中的边框
边框不会在下面的代码中删除,即图像精灵。我已经尝试过使用样式和边框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"/>
图片都配有默认边框,该图像被下载时只将消失。该图像来自图像的src
属性。如果没有设置src,那么图像将不会被下载,并且边框将永远存在 - 您的案例。
正常img标签看起来是这样的:
<img src="/something.jpg" />
你看起来是这样的:
<img />
你通过CSS的背景图像添加图像。不应该这样做。您可以添加背景图片,但通常用于其他目的。 (检查底部的旁边)。
尝试删除背景图像并将图像位置放置在图像的src属性上。像这样:
<img class="next" src="/share.png" />
您会看到图像现在没有边框。
除了 当背景图像被添加到一个img元素,这是通常当没有IMG src
设置为提供一个占位符图像。想一想博客评论部分的头像。
此外 当创建一个精灵,你可以使用div
小号p
小号em
小号等等记住,background-image
可以应用到任何元素!
它不工作http://jsfiddle.net/GB54f/1/ – PHP 2012-07-09 01:43:34
检查我的编辑。 – banzomaikaka 2012-07-09 01:49:28
不起作用:http://jsfiddle.net/GB54f/10/ – 2012-07-09 01:50:02
找到了它,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;}
我没有说你必须删除背景。我建议删除这个图像,因为他不需要它来做他想做的事情。我在底部甚至建议在img元素上使用背景图像。 – banzomaikaka 2012-07-09 02:05:46
是的,抱歉发布之前,我看到了 – 2012-07-09 02:06:33
假设你的HTML标记<img class="somthing" />
和在类 “东西”你已经定义了图像的背景位置。
当您从图像精灵中更精确地选择图像所在的特定图像时。您的课堂适合使用css中的背景位置获取图片。
删除边框的简单方法是将img
标记设置为div
。
如果您根据背景位置获取图像,为什么需要使用img
标记。
只写HTML一样...... <div class="next" ..>
你可以使用一个base64很小的透明图片,如果你不会使用一个外部文件
<img class="next" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
你尝试'边界:none'? – 2012-07-09 01:41:08
雅http://jsfiddle.net/GB54f/1/ – PHP 2012-07-09 01:44:10