刚开始学CSS Sprite的时候在网上看博客，总感觉写的不清楚，看了很多很久才明白CSS Sprite是个啥玩意儿，对新手党十分不友好。所以打算根据现有的文章和自己的理解写一个通俗的关于雪碧图的博客，能让新手党也一看就懂～
1.什么是CSS雪碧图
css雪碧图就是N张图片的拼接而成的一整张图片，注意是拼接成了一整张，而不是单纯的N张拼接在一起但仍然是零散N张。如下所示，假设我们的网页需要1，2，3张图片，但是我们把它拼接为一张，这样我们只需要引入这一张图片即可。
1.引入这一整张图片，那我只需要用第1/2/3张图片怎么办？
通过CSS3的background-image等属性，这个属性里面有一个叫做backgorund-position的属性，他的作用就是可以移动背景图片的位置，如果我们需要第二张图片，那么我们就通过设置background-positon的值，将图2移动到需要的位置即可。
2.这张图片不仅有我需要的图片，也有我不要的啊，那些图片怎么隐藏呢？
这个需要我们设置height和width，把需要的部分移动到height和width内之后，再通过overflow：hidden把需要的部分隐藏掉就好了！
3.雪碧图需要把很多图拼接在一起，怎么拼接？是拼接好了我直接引用还是引入多张图片之后再自己拼接？
肯定是拼接好了再引入，不然我全部引入了再拼接，和我直接引入多张图片有什么区别呢？至于怎么拼接，哈哈哈，这个我觉得是UI的问题，不过我们也可以通过ps软件进行拼接，现在也有一些现成的雪碧图生成软件，可以试试。
2.为什么要用雪碧图
CSS Sprites又作css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，减少单张图片资源请求次数，以优化渲染性能。
一下内容取自https://blog.csdn.net/mozuncangtianbaxue/article/details/77449895
如果你是第一次打开这个示例，肯定左边的列表图片是一张一张的显示，右边的列表图片是一起显示，这就是http请求。一张图片就是一个http请求，如果一个网页上面有几百张图片，比如说淘宝首页，那么将会是几百个http请求。再加上同时有很多游客会访问淘宝，这会导致服务器反应速度下降，甚至崩溃。这个时候，CSS Sprites就有很好的表现机会了，他能把不会经常变动的小图标集中到一张图片上，不但减少http请求，而且还降低了图片的大小，加快图片的加载速度。下面是我查看的十张小图的大小：
下面是经过合并成一张图片的大小：
相信大家能清楚的看见相隔有多少倍（不过我不知道是比较“大小”还是比较“占用空间”，不管是哪项，都小了许多）。但是你回头看看上面的DEMO，两个列表里面的图片效果是一样的，并不存在失真的情况，所以大型网站都会运用到CSS Sprites这项技术。
简而言之，相信大家都知道http越多，页面的首页加载速度就越慢。对于图片来说，一个图片就是一个单独的请求，多个图片就是多个请求，既然如此，为什么不把一些功能一类的图片合并为一张传过来以此降低请求数目呢？而这正是CSS sprite的目的。
3.实例
假设我们有一张现成的拼接图如下所示
要实现如下的网页
DOM 如下
<div class="sprite">
<div>
<span class="a"></span>
<h3>word</h3>
</div>
<div>
<span class="b"></span>
<h3>ppt</h3>
</div>
<div>
<span class="c"></span>
<h3>excel</h3>
</div>
<div>
<span class="d"></span>
<h3>pdf</h3>
</div>
<div>
<span class="e"></span>
<h3>文本</h3>
</div>
</div>CSS如下
<style>
h3,span{
display: inline-block;
height: 40px;
width: 40px;
}
.sprite span{
background-image: url('./1.png');
background-size: cover;
}
.a{
background-position: -40px, 50px;
}
</style>效果如下：
因为我们设置的宽高都是50px，比图片大。所以我们想当然的把width和height改小一点，例如改成40px，效果如下。
为什么会这样呢？因为我们用了background-size：cover。用这个属性代表我们的盒子会把背景图片整个包住，cover住。所以我们盒模型宽高减小的时候，background也会相应减小。
那能不能不用background-size：cover呢？那我们现在把这个属性去掉
.sprite span{
background-image: url('./1.png');
/* background-size: cover; */
}
我们可以看到 如果不用这个属性，那么背景图片会恢复原来的大小，变得很诡异，在本例中，该图片恢复原来的大小之后变得无比巨大ORZ。。。。
那么，我们能不能公共设置background-size具体值来设置图片大小，从而解决这个问题呢？答案是可以的，但是我们需要一个公式：
background-size 的宽度值 = (雪碧图总宽度 * 目标图像宽度) /雪碧图中高分辨率图像宽度
比如，我们上面的问题。
我制作的雪碧图中的图标是高分辨率下的50px * 50px；
网页中需要展示的目标图标是35px * 35px；
制作的雪碧图的总宽度是300px；
根据上面的公式 background-size 的宽度值 = (300 * 35)/50 = 210;
或许你已经注意到了，这里我只计算了背景图像的宽度值，并没有设置高度，这里就涉及到了background-size在响应式等比例缩放图片的应用了。这里暂不展开，下次可以单开一篇章好好聊聊。所以，为了确保背景图像缩放比例正常，我们将“height”值设置为“auto”。到这里。问题已经得到了完美解决。
经过计算之后，最后结果如下所示～
ps：图片是截取自其他例子，并且用的是qq截图，所以背景是黑色的，实例看着有点突兀。。背景是白色的就会好很多。
完整CSS代码
<style>
h3,span{
display: inline-block;
height: 40px;
width: 40px;
}
.sprite span{
background-image: url('./1.png');
background-size: 370px auto;
}
.a{
background-position: -75px, 50px;
}
.b{
background-position: -134px, 50px;
}
.c{
background-position: -193px, 50px;
}
.d{
background-position: -252px, 50px;
}
.e{
background-position: -310px, 50px;
}
</style>