4

在下面的代码中，边框没有被删除，即图像精灵。我尝试了一些使用样式和边框 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

4

4 回答 4

6

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

一个普通的 img 标签如下所示：

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

你的看起来像这样：

<img />

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

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

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

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

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

此外 ，当创建精灵时，您可以使用divs psem等。记住，background-image可以应用于任何元素！

于 2012-07-09T01:34:01.723 回答
2

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

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

删除边框的简单解决方案是将img标签设为div.

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

只需像...一样编写html<div class="next" ..>

于 2014-07-23T12:57:46.067 回答
1

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

<img class="next"  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
于 2014-10-31T13:40:50.727 回答
0

发现了，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-09T02:00:31.033 回答