CSS中雪碧图的使用与制作

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/