利用CSS技巧减小HTTP请求
发布时间：June 26, 2008
分类：CSS
《闲话各家开放平台》
《珍爱生命，远离懒惰》
简介
这种技巧的名称叫做CSS Sprite，基本原理就是利用CSS中图片background系列的background-image、background-repeat、background-position等属性实现。通过这种方式达到图片显示加速的关键，不是降低重量，而是减少个数。在通常情况下一张图片的传输时间，通常远小于请求等待的时间。
PS：特别制作了三个CSS Sprites实例演示，感兴趣的朋友可以看一看。
实例
比如google.cn现在首页的底部导航也是用这个方式实现的。
所用图片为：
效果：
代码
从网上找了好几个演示，大家可以看下面地址的演示：CSS Sprites实例演示
效果一：纵向背景图
最大化
最小化
效果二：横向背景图
颜色
链接
效果三：平滑投票
满分5.0, width:70px
当前2.5, width:35px
资料
本文在写作的过程中严重参考了如下文章：
CSS Sprites的实现
加速图片显示
利用CSS技巧减小HTTP请求
Yahoo的YShow网站优化中的34条规则
CSS Sprites: Image Slicing’s Kiss of Death
Tags: 高负载, css
版权声明：原创作品，欢迎转载，转载时请务必以超链接形式标明文章原始地址、作者信息和本声明。
