如何使用CSS Sprites优化你的网站

使用CSS Sprites是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中，即你的一张CSS Sprites由10张图片组成，那将避免9次HTTP请求，这减少的9次请求时延，正是加速的加载时间。这也有问题，跟每个HTTP请求的服务器开销一样，需由Apache的子进程管理，占用20MB的内存。你最好帮你的服务器进程减少HTTP请求：卸载媒体到Web前端Amazon S3，诸如此类。

  在这个示例中，我选用大小为42×42px的图，它有336px的偏移（译注：是指左偏移）并紧贴着顶部。这样便形成了相应的CSS：

a.stammy, a.stammy:hover{
     background:#fff url(path/to/sprites.png) -336px 0 no-repeat;
     display:block;
     height:42px;
     width:42px;
     text-indent:-9999px;
     overflow:hidden;
}

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

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

  编写HTML代码

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

<a class="stammy" href="http://www.zhansanjie.com" title="站三界导航">站三界导航</a>

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/24260.html