如何在html中使用背景图片而不是IMG标签？
如何在html中使用背景图片而不是IMG标签？
提问于 2012-06-28 11:50:02
我有下面的HTML，里面有很多这样的链接：
<a class="button" id="menu">
<img width="16" height="16" src="/Images/control-double.png">
</a>我为这些创建了一个sprite，所有的图像都使用
spritegen
但当我看这个的时候，它似乎只是作为背景，因为它给出了一个例子：
.sprite-control-double{ background-position: 0 -396px; width: 16px; height: 16px; }
#container li {
background: url(csg-4febd28fe3aa3.png) no-repeat top left;
}如何使用带有定位的sprite来代替单个图像？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-28 12:06:32
如果你使用"sprite“技术，那么你的锚点中就不需要IMG元素了：
a.button {
background-color: transparent;
background-image: url(/Images/control-double.png);
background-position: 0 -396px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
}我添加了background-color样式，因为在某些浏览器中，如果没有背景色，渲染引擎将不会显示背景图像。
Stack Overflow用户
发布于 2012-06-28 11:53:59
是的你可以。这就是sprites的工作方式，它们被应用为溢出设置为隐藏的元素的背景。
您应该完全删除<img>标记，并依赖于<a>标记的背景。sprite的目的是取代对非语义<img>标记的需要。
Stack Overflow用户
发布于 2012-06-28 12:03:43
所有这些都在spritegens帮助页面链接的文章中得到了很好的介绍：http://www.alistapart.com/articles/sprites
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11237827
复制相关文章
相似问题
腾讯云开发者
