0

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

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

我为这些创建了一个精灵，将所有图像组合使用

精灵

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

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

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

4

3 回答 3

3

IMG如果您使用“sprite”技术，那么您的锚点中不需要元素：

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

于 2012-06-28T04:06:31.517 回答
0

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

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

于 2012-06-28T03:53:59.257 回答
0

从 spritegens 帮助页面链接的文章中很好地涵盖了这一切：http ://www.alistapart.com/articles/sprites

于 2012-06-28T04:03:42.967 回答