首先，什么是精灵图？

css精灵(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中

应用的原因：

1.减少请求

2. 优化页面加速度

3. 减轻服务端压力

4. 节省网络资源

那么问题来了，怎么做这样的精灵图呢？

这个就不得不说要用到ps了，来教你操作漂亮的精灵图吧～

新建透明图层(ctrl+n)

添加 参考线（ctrl+r）将画布划分，将小图标放入划分好的格子中

精灵图的使用： css精灵图需要配合背景的图片和背景定位

只要两部就可做精灵图，一起来看看吧！

1.引入精灵图

image

2.精确定位需要显示的小图标坐标

image

下面就是效果啦！

image

关键点：

1.background-image:url("图像的路径")

2.background-position:x y; 图片的定位