Question

我有以下HTML以及许多这类链接：

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

我为这些创建了一个精灵，并使用

组合了所有图像

spritegen

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

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

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

Answer 1

如果您使用“精灵”技术，那么您的锚点中不需要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>标记的背景。精灵的目的是取代对非语义<img>标签的需求。

Answer 3

这一点在从spritegens帮助页面链接的文章中得到了很好的介绍：http://www.alistapart.com/articles/sprites

如何在html中使用背景图像而不是IMG标记？

3 个答案: