一，首先来了解一下什么是CSS雪碧图
- 来看这样的一个网页
Paste_Image.png
你会发现这里面有许多的图片，但是是否真的有这个多张图片呢？
答案是否定的，整个网页的图片其实只有这样的一张
Paste_Image.png
这是怎么办到的呢？
答案就是，使用CSS雪碧图，也就是多张图片合成为一张图片，然后通过位置的偏移使其与页面元素接合在一起所制成的使用雪碧图的好处是什么？
1.因为多图合成为了一张图，所以减少了网页图片的请求，加快了网页的加载速度；
2.可以重复使用；
二，现学现做CSS雪碧图，让我们来一步步实现类似下面图片这样的效果吧
类似效果图
1.首先，我们需要一些小图片，可以在阿里巴巴的iconfont里面下载到这些图片
搜索图片
下载素材
2.下载完毕后打开下载的文件可以看到这些图片，为了后面的方便我将他们命名为了1，2，3，4，5，6
小图片
3.然后网上搜索一下雪碧图合成网站，个人推荐雪碧图合成，使用方式如下图：
网站使用方式
4.添加完毕点击创建后，出现下图，点击下载png格式图片就出现这个合成图的网络连接了，这样的一张多小图合成的大图就是一张雪碧图
得到链接
链接长这样
5.创建html文件，并写入一个列表代码，为了方便后面的设置，我添加了class选择器；
列表代码
6.复制前面我们得到的雪碧图网址url，添加进每一个列表li元素中，并设置其不重复以及它的尺寸为你想要的尺寸，顺便去掉列表的默认样式，得到下面这样的图；
添加雪碧图进背景
7.设置li元素的文本格式以及宽高等样式，然后添加边框，得到如下图：
设置li的样式
8.最后一步，使用前面添加的class选择器对每个li元素单独设置背景雪碧图所要显示的偏移位置，例如，第三个li元素显示是便便的图，就这样设置：
设置雪碧图偏移量
PS：设置不准偏移量的可以在开发者工具中慢慢调整；
9.最终效果图显示以及代码一览：
这样就完成了我们的雪碧图列表了
