解决图片闪烁问题（雪碧图）

介绍

将多个小图片统一保存到一个大图片中（雪碧图），然后通过调整background-position来显示相应的图片，这样图片就会同时加载到网页中，就可以有效避免出现闪烁的问题

这个技术在网页中应用十分广泛，被称为CSS-Sprite（雪碧图）

---

雪碧图的使用步骤

1、先确定要使用的图标

2、测量图标的大小

3、根据测量结果创建一个元素

4、将雪碧图设置为元素的背景图片

5、设置一个偏移量以显示正确的图片

---

雪碧图的特点

一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验