雪碧图--精灵图(sprite)是什么？怎么使用以及它的优缺点是什么吗？

今天复习的时候突然发现一个自己没有看太懂得东西，就是sprite，出于好奇就查了一些资料，惊奇的发现原来他还有一个非常美妙的名称------精灵图，是不是很有意思呀，接下来我们就来一起看一看它到底是个什么呢？

一：雪碧图，精灵图：

1.定义

sprite其实就是减少请求次数的有效手段，原理就是将多个小图片拼接到一个图片中，使用时通过css进行定位

2：精灵图的使用：

没有精灵图使用之前，图标是一个一个独立的文件；使用之后是拼在一起的一张图
方法：首先确定要使用图标的位置和大小
然后进行代码的编写
下面来看一个例子：
来看一个排列规则的，大小均为50px*50px，则第一个图标的的位置是0 0，第二个是50px 0，依次往后…
代码如下：

 1 .box1 li:nth-child(1) {
 2   width: 50px;
 3   height: 50px;
 4   background: url(./images/1.png) no-repeat 0 0; /* 第一个图标*/
 5 }
 6 
 7 .box1 li:nth-child(2) {
 8   width: 50px;
 9   height: 50px;
10   background: url(./images/2.png) no-repeat -50px 0; /* 第二个图标*/
11 }
12 
13 .box1 li:nth-child(3) {
14   width: 50px;
15   height: 50px;
16   background: url(./images/3.png) no-repeat -100px 0; /* 第三个图标*/
17 }

以上是一个规则的精灵图的展示。如果是排列不规则的，测量计算就不太方便，推荐一个在线精灵图样式工具http://tools.jb51.net/cod/css_sprite

3.使用它的优点：

• 减少http请求次数，极大地提高页面加载速度；
• 增加图片信息重复度，提高压缩比，减少图片大小；
• 更换风格方便，只需要在一张或者几张图片上修改颜色或者样式即可实现。

4.缺点

• 图片合并比较麻烦
• 维护麻烦。修改一个图片可能需要重新布局整个图片