15.精灵图

像这种给小图标攒成一张图的图像，就叫精灵图

使用精灵图的目的是降低请求次数，比起每个小图标都要请求一次，我们直接给一个大的图像，在显示若干个小图标的时候，只需要请求一次

精灵图主要用于小的且不经常换的图像(因为整一张精灵图费劲)，像这种要经常换的图像，最好不要使用精灵图技术

 精灵图被称作 CSS sprite，它的工作原理实际上是改动background-position，我们做个例子，我们现在有这样一张精灵图

• 一般从美工手里拿到的都是透明背景的，我这是白的，我就简单用一下

我现在搞两个盒子，分别把男女这两个标志搞出来

我们首先打开ps量一下，图标的大小与图标在图像中的位置

我们测量出来图标的大小是18px*18px

位置是 x 26px y 57px

然后我们代码这样写

这里我说一下原理，我们实际上是把精灵图中需要的部分，提到左上角

所以我们background-position的值在这里都是负值

如果觉得难以理解的话，我们每次都从图像的左上角点开始量，一直量到图标的左上角点，然后记住background-position的两个值都给测量数据的负值，就可以了

打开html后发现我们的图片出来了

我们再搞一个女性的图标

图标大小是一样的，位置我们测量出来是x 26px y 88px

如果觉得效果不好，你就微调一下，问题是出在我测量的不太准，测准点儿就没问题了，如果觉得上面的测量方法麻烦，可以看一下 附录2-PS基本操作_Suyuoa的博客-CSDN博客 中的第七个方法

• 视频里用了一个新的工具，我觉得用ps是完全可以替代这个工具的，有兴趣可以看一下p253 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili