CSS sprites提升网站相应速度

CSS sprits意为css精灵它是通过将所有图片合成为一张图片，然后通过background-position属性在这一张图片上通过定位的方式调用图案。

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}
//引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..
#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
#ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
.nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

雪碧图

还有一种就是我们常说的“雪碧图”也是利用css动画特性，当我们鼠标经过按钮的时候，css就移动图案位置到上图图片中的中间位置。

为什么要利用css sprits的特性？

如果我们想提升网站的访问速度，最最有效的方式就是减少HTTP请求，我们知道当浏览器向服务器请求资源的时候，每一个静态资源（文档、图片、视频）都会建立一个HTTP请求。如果我们网站上的图片数量过多必然会导致HTTP请求的数量增加。所以为了减少HTTP请求我们将图片合成到一张图片上，这样就可以提升网页的响应效率。尤其是针对小图标比较多的网站，这种方法尤其适用。
因为图片文件存储的时候会携带图片的颜色配置文件，每一个图片都会有一份，小图标占用图片文件内容不多，减少携带的图片颜色配置文件反而可以减少图片文件的大小，从资源大小的角度来说，这样子又减少了宽带的压力。