重庆游记

从开始学习前端设计开始,就能看到不少网站把一些背景图片和 ICO 图标文件都整合成一个文件.刚开始还不能理解这是为什么,反而认为这样增加了设计人员的工作量.但通过一段时间的接触后,才懂得整合文件的好处.

其实在平时的电脑操作上我们都能遇到类似的情况,比如我们把几百张照片从D盘拷贝到E盘,可能需要十几分钟的时间.但如果这几百张照片事先压缩成一个文档,拷贝的速度就会快很多,而且时间也花了更少.

同样的道理,CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.(见下图)

实现方法：

首先将小图片整合到一张大的图片上;
然后根据具体图标在大图上的位置,给背景定位.(background-position:-8px -95px;)
注:整合后的图片最好用 Firework 导出为 PNG8 的格式,比起PS生的图片会更小.