用 CSS Sprites 减少请求次数，加速网站
CSS Sprites就是将网页上所有的背景图片都放在一张大图片上，更详细的介绍
在需要用到图片的时候，现阶段是通过CSS属性
background-image组合background-repeat,background-position等来实现……我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。
比如本站的所有背景图片已经整合成单独一张，然后通过CSS定义背景：
.bloglines, .zhuaxia, .google, { background-image: url(images/b.gif); } .bloglines { background-position: 0 -216px; } .zhuaxia { background-position: 0 -332px; } .google { background-position: 0 -448px; }
上面这一段代码用同一张背景图片生成了Google，Zhuaxia，Bloglines的订阅图片。效果可见右侧栏的订阅区，与各自指定图片背景效果完全一样。
上面最麻烦的一个地方在于如何生成大图片，利用PhotoShop的Merge功能可以把图片整合在一起，但每个小图片在大图片的位置参数需要一个一个去弄，比较麻烦，但是比较自由。利用CSS Sprites Generator，一切都自动搞定。这个网站支持上传图片的ZIP压缩包，然后生成一张大图片，已经以图片文件名为类名的CSS语句，自动给出每个图片对应的位置。另外还可以设置各个小图片之间的间隔，以适应内容的适度拉伸。
文章发表于 2008-04-02 22:14:41，
所属分类 wordpress, CSS 。您可以通过订阅RSS 2.0来跟踪该文章的评论。
本文Trackback地址：http://yaley.blog.35.com/2008/04/02/yongcssspritesjianshaoqingqiucishujiasuwangzhan/trackback/。
