1. 定义

CSS sprite也叫做CSS 雪精灵，CSS 雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星小图都包含到一张大图中去。

2. 使用雪碧图的优点

① 减少图片的字节。

② 客户端每显示一张图片都会向服务器发送请求，所以图片越多，造成的延迟越大。使用雪碧图访问页面时，由从前的多次请求转换为一次请求，减少了网页的HTTP请求，从而大大提高了页面的性能。

③ 减轻了对图片命名的困扰，提高了网页的制作效率。

3. 使用雪碧图的原理

① 设置一个有宽高的容器（因为雪碧图需要使用背景图片，但是背景图片不能自动撑开容器，所以需要手动设置容器大小）

② 通过background-image引入雪碧图作为背景图片。

③ 通过background-position把背景图片移动到需要的位置。

4. 雪碧图的制作

① 安装Photoshop

② 下载Cutterman插件

③ 打开图片，点击移动工具，设置自动选择为图层，选中需要的图层（按CTRL多选）

④ 图层选择完毕，点击窗口，选择扩展功能，选择Cutterman

⑤ 勾选合并导出选中的图层，根据需求选择iOS、Android和Web，选择输出路径导出