精灵图（雪碧图）

解决图片闪烁问题：

        可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示。

        这样图片会同时加载到网页中，就可以有效的避免出现闪烁的问题

        这种技术被称为雪碧图

使用步骤：

1、确定要使用的图标，

2、测量图标的大小，

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

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

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

举例：

.box{

        width:图标的宽度；

        height:图标的高度；

        background-image:url(./img/xxx.png);//这是一个图的集合

        background-position:0 0;//表示图片的左上角

}

<div class='box'></div>

（来源于某视频）