14-精灵图

一、精灵图：将多张小背景图合为一张图，减少服务器压力。

二、使用：

1、使用ps打开精灵图 ----》右击“裁剪工具“” ----》选择其中的切片工具”  -----》框选需要使用的区域  -----》右击选择“编辑切片选项”，获取图片位置。
2、给一个盒子添加精灵图，精灵图默认是贴在盒子左上角对齐。
3、图片左移是负值。
4、在样式中输入以下代码：
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(精灵图.png) no-repeat -182px 0;
}
5、可以给任意地方的盒子添加精灵图，具体做法类似。