引入
当用户访问网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而一个网页中往往会有很多小背景图片作为修饰，当网页背景图像过多时，服务器就会频繁的接收发送请求，这会大大降低页面的加载速度，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，就出现了css精灵技术 （CSS Sprites）
CSS精灵并不是很高深的技术，CSS精灵是一种处理网页背景图像的方式，它将一个页面涉及到的所有背景图像都集中到一张大图中，然后当客户端请求服务器时，直接将这个大图发送给客户端，这样当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部显示出来，通常情况这个由很多小背景图像合成的大图被称为精灵图。
使用精灵图
通过定义我们知道，css精灵其实就是将网页中的一些背景图像整合到一张大图中，我们需使用精灵图里面的某个小图片就需要通过css的background-image(引入精灵图)，background-repeat(指定不重复)，
background-position(确定小图在精灵图中的位置，必须精确定位)
接下来看一下一些大型网页是否使用了精灵图
如淘宝页面
通过审查元素，查看右边小图标是否使用了精灵图。
点击游戏
查看Style
我们发现”游戏“盒子使用了background-position的属性，我们都知道这个属性是设置背景图的位置的，他使用的是哪个背景图呢？在观察html代码，发现他还有一个tbh-icon的类，通过Style我们可以看到tbh-icon引入了一张背景图片，打开背景图片链接
如下，一张图片包含了很多个小背景图，这便是【精灵图】
很多大型网页都使用了这种技术，所以我们还是有学习的必要
根据淘宝的精灵图我们试着来使用一下
假设我们要使用“飞猪”图片，上面提到我们要使用精灵图的小背景图
就需要通过background-postion设置精确位置，以“飞猪为例”。
1.将精灵图用ps打开
为了避免改变精灵图的位置，我们第一次打开时需将图层锁定
通过选取工具，选取我们需要的图片得到其大小位置信息，图片的信息在“窗口”—“信息”。
将鼠标置于选取图片的左上角
如图得到图片的大小及位置信息
在html文件中
```php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background: url(icon.png) no-repeat;
//引入精灵图
}
div:first-child{
width:49px;
height:49px;
background-position: 0 -176px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
效果图
制作精灵图
制作精灵图就是将小图标放图一个大的背景中即可，这里就不一一阐述，精灵图制作遵循一下原则
1.精灵图必须为透明背景
2.精灵图中个各个小图应该有一定的间距
3.精灵图底部应该预留位置方便以后添加
4.精灵图存储为png格式
