CSS Sprites的原理和作用

CSS Sprites精灵图，讲真我是第一次知道精灵图的英文名，要不是因为上一次的测验我根本不知道，我看到题目就懵了 这什么我学过吗？？？差点以为是css有关了 当时内心 ：

事后特意了解了下：

  它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。利用CSS的 background-position background-image使用。
   我们在分析很多页面的时候经常可以看到有很多元素共用了一张背景图这张图片包含了这些元素所需要的背景图这就是 CSS Sprites。

像这样的图
这样写有什么好处呢？
假如现在有一个列表，每一行都要插入一张图片如果用普通的img来放置使用Chrome打开页面时一张图片发送一个http请求，过多的请求都后台都是一个额外开销 如下：

<li><img src="img/1.png" alt=img/> </li>
<li><img src="img/2.png" alt=img/> </li>
<li><img src="img/3.png" alt=img/> </li>
<li><img src="img/4.png" alt=img/> </li>

如果使用CSS Sprites，将所有的图片合成一张图多个http请求会被合成一个http请求，大大降低后台服务的开销。

原理：

CSS Sprites是通过背景图片外加背景图片定位来实现的。如下：
设置一个长宽为20px的div,插入一张背景图

.pic{
	 width: 35px;
	 height: 35px;
	 border: 1px solid red;
	 background-image: url(img/icon.png);
	 background-position : 3px 3px;
			}

会出现如下：

在通过加 background-position 来定位调整所需要的的位置，就算图片大于盒子也不影响，.可见，一个定义了宽高的盒子像一个视口，通过设置背景图的位置来看图片不同的位置。这就CSSCprites的原理。

下面是CSSCprites的优缺点
优点：
1.减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广 泛传播和应用的主要原因；（在上面已经举例过了）

2.减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；（这个听过经过多次比较得来的）

3.减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；（确实呀每次去个名字想半天拿手机搜英文）

4.更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。（调整各位置大小就能改变）

优点有了确定肯定有！！！！
图片合成比较麻烦；（想想在抠图的时候还要把一张张小图合在一起）

背景设置时，需要得到每一个背景单元的精确位置；（是的，我每次都f12控制条调整举例而且一张张调整）

维护合成图片时，最好只是往下加图片，而不要更改已有图片。

（悄悄说声优点可是抄过五遍的想想都可！）