CSS Sprites优化网页代码的方法(2)

    CSS选择器对所有含 class="stammy" 属性的链接都有效。背景属性载入精灵图片，然后设置背景图位置为负值（其必为负）。如果图片离顶部有10个像素，那背景位置应该是“-336px -10px”。之后在CSS中设置了宽和高。我对悬停伪类（hover pseudoclass）也进行了设置，因为有一次当我悬停在该类的链接上时，会改变链接的悬停状态的颜色，从而背景图会消失。

    设置溢出隐藏“解决当你选择要替换的文本的时候，那高亮部分会一直延伸到屏幕左侧的烦人问题”，正如Rob所说。对其他所有图片如法炮制，并对每个选择器命名。

    编写XHTML代码

    目今你已经对每个图片有一些CSS选择器。至此你已经搞定了大问题，还差最后一步。现在只需对每个选择器创建链接。

    相当简单吧？用CSS和链接设置类，将精灵的信息组合起来，只显示精灵的一部分。虽此，因为我们甚至没使用一个img标签，我们不能设置alt属性，而这对移动用户、搜索引擎、屏幕阅读器之类