1.1为什么需要精灵图
image.png
1.2精灵图(sprites)的使用
使用精灵图核心：
1、精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。
2、这个大图片也称为sprites 精灵图或者雪碧图
3、移动背景图片位置，此时可以使用background-position
4、移动的距离是这个目标图片的x和y坐标，注意网页中的坐标有所不同
5、因为一般情况下都是往上往左移动，所以数值是负值。
6、使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
1.3精灵图(sprites)的使用代码
sprites.png
.box1{
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/sprites.png);
background-position: -182px 0;
}
.box2{
width: 27px;
height: 25px;
margin: 200px;
background: url(images/sprites.png) no-repeat -155px -106px;
}
<div class="box1"></div>
<div class="box2"></div>
1.4案例：拼出自己的名字
abcd.jpg
span{
display:inline-block;
}
.d,
.h,
.c{
width: 105px;
height: 107px;
}
.d{
background: url(images/abcd.jpg) no-repeat -360px -6px;
}
.h{
background: url(images/abcd.jpg) no-repeat -215px -141px;
}
.c{
background: url(images/abcd.jpg) no-repeat -234px -6px;
}
<span class="d">d</span>
<span class="h">h</span>
<span class="c">c</span>
