简单介绍一下Css Sprite图片整合技术

本文也算是属于高性能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技术的好处

  1. 可以减少大量零碎图片;
  2. 合并后的大图比分离的小图体积加起来要小得多。 因为再小的图片也有基础信息,10张小图就有10个基础信息,但一张大图只有一个基础信息。
  3. 明显减少http请求数据量

使用css sprite技术的注意事项

  1. 不要企图把所有小图标图标都堆在一张大图上(强迫症…)
  2. 如果大图加载失败,则所有图标都不能显示出来
  3. 显示图标的标签应该限制宽高,不然超出范围的话可能会显示出其他的小图片

什么时候使用CSS Sprite技术?

比如一个文章分类的UL,每个LI的列表图标都不一样;比如一个图片按钮的正常与hover的两种状态;等等

———————————————————————————

更全面的CSS Sprite技术请大家自行摸索吧,抛砖引玉是一种美德(其实是我懒)

发表评论

电子邮件地址不会被公开。