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

边框不会在下面的代码中删除，即图像精灵。我已经尝试过使用样式和边框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

来源

2012-07-09 PHP

你尝试'边界：none'？ – 2012-07-09 01:41:08

雅http://jsfiddle.net/GB54f/1/ – PHP 2012-07-09 01:44:10

图片都配有默认边框，该图像被下载时只将消失。该图像来自图像的src属性。如果没有设置src，那么图像将不会被下载，并且边框将永远存在 - 您的案例。

正常img标签看起来是这样的：

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

你看起来是这样的：

<img />

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

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

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

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

除了当背景图像被添加到一个img元素，这是通常当没有IMG src设置为提供一个占位符图像。想一想博客评论部分的头像。

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

来源

2012-07-09 01:34:01 banzomaikaka

它不工作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;}

来源

2012-07-09 02:00:31

我没有说你必须删除背景。我建议删除这个图像，因为他不需要它来做他想做的事情。我在底部甚至建议在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" ..>

来源

2014-07-23 12:57:46

你可以使用一个base64很小的透明图片，如果你不会使用一个外部文件

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

来源

2014-10-31 13:40:50 Francesco

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

回答

相关问题