## **雪碧图** > 将小图标和背景图像合并到一张图片上，然后利用css的 > > 背景定位来显示需要显示的图片部分。 该图片使用CSS background和background-position属性渲染。 **优点**：加载网页图片时，减少服务器的请求次数，提高页面的加载速度。 将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显 ### **代码要点**： 1、每个图标两层：a标签包着i标签； 2、都需要用到display: inline-block; 3、使用background-position改变雪碧图的位置 ***** 替代方案：iconfont。