雪碧图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去
雪碧图一般会给一个完整的图片，主要利用background-position 属性设置背景图像的起始位置。
优点
- 减少图片的字节
- 减少网页的http请求，从而大大的提高页面的性能
原理
- 通过background-image引入背景图片
- 通过background-position把背景图片移动到自己需要的位置
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>雪碧图</title><style>span{display: block;width: 55px; height: 55px; border: 1px solid #ccc;background-image: url("img/xuebi.png") ;float: left;}/* background-position 属性设置背景图像的起始位置。提示: 默认情况下，background-image 背景图像放置在元素的左上角，并在垂直和水平方向上重复。 */.one{background-position: -14px -20px;}.two{background-position: 70px -20px;}.three{background-position: 143px -20px;}.four{background-position: 216px -20px;}.five{background-position: 288px -20px;}.six{background-position: 360px -20px;}</style>
</head>
<body><div><span class="one"></span><span class="two"></span><span class="three"></span><span class="four"></span><span class="five"></span><span class="six"></span></div>
</body>
</html>实现效果：
实现效果没有做很长，依次类推，可以慢慢根据距离做出雪碧图，如有不解，可以在评论区评论，共同进步
