css 精灵图(sprite)

简介

前端精灵图（也称CSS雪碧图）是一种优化前端性能的技术，它将多张小图片合并成一张大图片，并使用CSS背景定位来显示各个小图片，从而减少了HTTP请求次数和网页加载时间，提高了网页的性能和用户体验。

样例

如图, 多张小图片合并成一张大图片，并使用CSS背景定位来显示各个小图片

目标显示此emoji😆

1. 设置背景图片
2. 设定background-position 位置,可以在开发者工具微调
3. 设定宽高