本文也算是属于高性能web前端优化指南
CSS Sprite是指一种图片整合技术,而且从名字就能得知:这是一项运用于CSS的技术。
CSS Sprite,就是把你需要使用的一些零碎小图片(通常是小图标之类),通通集合在一张大图片里面,然后在CSS进行调用时,通过background-position属性定位到你需要显示的图片上,造成一种正常显示的“假象”。
通常一张整合了的CSS Sprite图片如下:
很吓人吧,但网页上显示你看到的是这样:
左图中分别出现了3个小图标。
通过chrome或firebug,可以看到所有有图标出现的元素都有一个共同的CSS背景图片,代码例如:
.bg {background-image:url(images/ex.png);
然后在每个不同的图标处指定不同的background-position,如:
.bg1 { background-position:-22px 33px; width:20px;height:20px; };
这时候给任一html标签加上class=”bg bg1″,就能实现以全背景图片做背景,但只显示特定x坐标和y坐标的的图片效果。
使用css sprite技术的好处:
- 可以减少大量零碎图片;
- 合并后的大图比分离的小图体积加起来要小得多。 因为再小的图片也有基础信息,10张小图就有10个基础信息,但一张大图只有一个基础信息。
- 明显减少http请求数据量
使用css sprite技术的注意事项:
- 不要企图把所有小图标图标都堆在一张大图上(强迫症…)
- 如果大图加载失败,则所有图标都不能显示出来
- 显示图标的标签应该限制宽高,不然超出范围的话可能会显示出其他的小图片
什么时候使用CSS Sprite技术?
比如一个文章分类的UL,每个LI的列表图标都不一样;比如一个图片按钮的正常与hover的两种状态;等等
———————————————————————————
更全面的CSS Sprite技术请大家自行摸索吧,抛砖引玉是一种美德(其实是我懒)