CSS雪碧 即CSS Sprite，或叫CSS精灵(Sprite 意思是"雪碧，精灵"等)，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。(参考百度百科)
1、解决的问题：减少网页多图片图标的多请求性能快慢问题，这样只请求一张或几张图片即可，优化网页性能。注，雪碧图的文件大小要适当，建议合成中小图片图标，不可过大，否则达不到性能优化目的。
2、背景图片定位相关CSS属性
background-image: 图片链接或路径；
height和width (背景图片展示区域大小)；
background-position:X轴 Y轴; (要展示图片的位置,正值向上(右),负值向下(左),用空格分隔,如 20px 40px)
background-position-x: -200px;或background-position-y: -200px; (当雪碧图是单排横向或竖向排列时，可只用X轴或Y轴定位)
3、案例：用华为云课堂官网课程卡片展示图片(官网https://classroom.devcloud.huaweicloud.com/)
图片链接(原图挺大的让我缩小了) https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/cloud-class.5974862e24f459dd518a.png
使用代码：
<style>
.pos{ height: 200px; 380px; } //设置大小,下面的设置各自图位置
.pos1 {
background-position-y: 200px;
background-image: url(https://res.devcloud.huaweicloud.com/
obsdevui/diploma/8.1.12.003/cloud-class.5974862e24f459dd518a.png);
}
.pos2 {
background-position-y: -400px;
background-image: url(https://res.devcloud.huaweicloud.com/
obsdevui/diploma/8.1.12.003/cloud-class.5974862e24f459dd518a.png);
}
.pos3 {
background-position-y: -1400px;
background-image: url(https://res.devcloud.huaweicloud.com/
obsdevui/diploma/8.1.12.003/cloud-class.5974862e24f459dd518a.png);
}
</style>
<body>
<div class="pos pos1"></div>
<div class="pos pos2"></div>
<div class="pos pos3"></div>
</body>
效果：三个div，分别展示不同位置的图片
4、雪碧图的制作
1）用PS合成web可用格式图片(png等)；
2）用第三方雪碧图在线工具合成，百度搜索 CSS sprite generator 即可找到，个人感觉较好的如下：
https://www.toptal.com/developers/css/sprite-generator/
https://css.spritegen.com/
