CSS Sprites优化网页代码的方法

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

    下面是两个CSS Sprites，一个是Google的，一个是PaulStamatiou的。

    照猫画虎，把你网站上经常使用的web图片元素打包——比如你的logo，RSS图标，还有其他不会经常变更的东西。用Photoshop或者你的图片编辑工具，把它们放在单个的图片里。你可以尽贴着放置图片，但要是你稍微留点白再下一步选中会更简单些，然后保存图片。

    编写CSS代码

    有了CSS Sprites，你将要用CSS选择器对每个只显示精灵中部分图片的链接进行处理：只要你需要的那部分。你需要知道待显示图片的精确大小以及位置。这步用到Photoshop中的切片工具并选出你要用的那部分的图。对新切片右键单击，选择编辑切片。在弹出的窗口会有图片的分辨率和位置。

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

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

    设置溢出隐藏“解决当你选择要替换的文本的时候，那高亮部分会一直延伸到屏幕左侧的烦人问题

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!