如何在HTML中使用背景图片代替IMG标签？

Question

我有以下带有许多此类链接的HTML：

<a class="button" id="menu">
   <img width="16" height="16" src="/Images/control-double.png">
</a>

我为这些图像创建了一个Sprite，并使用

精灵

但是当我看这个的时候，它似乎只是作为背景，因为它给出了一个例子：

.sprite-control-double{ background-position: 0 -396px; width: 16px; height: 16px; } 
#container li {
    background: url(csg-4febd28fe3aa3.png) no-repeat top left;
}

如何使用带有图片定位而不是单个图片定位的精灵？

Answer 1

如果使用“ 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样式，因为在某些浏览器中，如果没有背景颜色，渲染引擎将不会显示背景图像。

Answer 2

是的你可以。 这就是精灵的工作方式，它们被用作元素的背景，且其溢出设置为隐藏。

您应该完全删除<img>标记，并依赖<a>标记的背景。 Sprite的目的是取代对非语义<img>标签的需求。

Answer 3

从spritegens帮助页面链接的文章中对此进行了很好的介绍： http : //www.alistapart.com/articles/sprites