html - 如何在 html 中使用背景图片而不是 IMG 标签？

Question

我有以下包含许多此类链接的 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 来定位图像而不是单个图像？

Answer 1

如果您使用“sprite”技术，那么您的 anchor 中不需要 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 样式，因为在某些浏览器中，如果没有背景颜色，渲染引擎将不会显示背景图像。