关于CSS Sprites（CSS精灵）的详细解析

CSS Sprites简介

Css sprites 可翻译为css精灵，也有人翻译为css雪碧，由于sprite也有雪碧的意思。在国内习惯成他为图片整合技术，说起来这个称呼也是满贴切的，由于他的确是多张图片整合为一整图片的技术，为什么要把多张图整合到一张上呢，这样做有什么好处呢？由于这样的话，当您访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

CSS Sprites原理

Css sprites是将多张零散的背景图片整合到一张背景图上，而后通过background-position来调整背景的位置，这个时候你必需确保用该张精灵图的容器要比背景图片小才是OK的，不然很容易漏出其余的背景图片，所以尤其要控制好盒子的大小；其次，你还需要注意书写背景定位的时候极大多数都是负的，水平为负数，图片才会往左侧平移，所以才会显示出你需要的那部分背景图，垂直方向也是同理。当多个盒子引使用一张背景图时，只要要改变背景定位即可以改变页面中的显示部分为哪一部分背景图，这样做的目的就是为了降低浏览器向服务器的请求次数，这样一来能大大提高网页的加载速度。

CSS Sprites优缺点

CSS Sprites 的优点：

1、利使用CSS Sprites可以够减少浏览器向服务器的请求次数，减少http请求，从而提高页面的性可以，这是图片精灵的最明显特点，也是被广泛应使用的主要起因。

2、利使用图片精灵还可以减少图片的字节，你用9张小的图片，一张4KB，9张就是36KB，而把他们都放一张图片上，只要要4KB到5KB即可，所以减少图片字节也是显而易见的。

3、在整理图片的过程中，不需要再纠结如此大量图片的名字问题，多张放在一张上，只要要取一个综合的名字即可以了，如此便提高了工作效率。

4、假如想改变网站风格，你只要要解决一张图片即可以了，把一张图片的颜色和风格一改，那么整个网站的风格就都变了，便于后期的维护和修改。

CSS Sprites 的缺点：

1、在应使用精灵图片的时候，你需要考虑当前盒子会不会漏出其余的背景图，这个还好，比较头疼的是，页面自适应时，背景图的位置就没那么容易掌控了。

2、制作精灵图的过程比较繁琐，你需要解决好每张图之间的距离和位置，假如做得不正当，那么用起来就比较麻烦了，甚至需要单独创立一个空的盒子来装背景图。

3、用精灵图的页面后期维护带来了繁琐，由于他是多张图在一张图上，牵一发而动全身的感觉，你改变一张背景图，假如大小发生变化，那么其余的你就得动，只需你动了，那么所有的背景定位都将需要改变，所以一旦需要更改背景图的话，轻易不要改变其余图片的位置，原位可以放下就在原位改，放不下就在下面增加。

CSS Sprites的用

1、假如你的精灵图是整整齐齐的一竖排或者者一横排，并且每一个背景图的尺寸都是一致的，那么你就幸运了，由于这样我们就不需要对每一个被那个图的位置都进行测量了，比方这张背景图：