精灵图
精灵图用于将多张小图片合成为一张图片，然后在多个元素中使用同一个背景，并以背景移动的方式进行共享使用，使用精灵图可以减少请求资源上的消耗。
一张精灵图如下。
实际开发中，美工应该给出每个小图片的位置和大小，如果没有，可以在www.spritecow.com/上上传精灵图后得到每个小图标的位置和大小。该网站的使用如下图。
得到css后可以直接使用，把关于某个图标的盒子模型属性、布局、背景图片等属性都放在一个类里。但是对于精灵图中一些需要多次使用的图标，还是需要对其进行封装、代码抽取，这里的抽取思路如下，一共分为三个类。
- 抽取一个公共类指定该图标公用的精灵图背景。
- 设置具体的图标大小该图标所使用的背景图位置。
- 设置改图标在具体页面具体位置的布局。
在需要多处使用同一图标的地方，前两个类适合放在公共样式里，使用图标时套用该类即可，后一个类则放在具体的公共页面中为该图标布局。完善的代码如下。
//common.css
.sprite_01{
display: inline-block;
background:url("./asset/images/image.png") no-repeat;
}
.sprite_01.hot-icon{
width: 30px;
height: 15px;
background-position:-192px 0;
}
//pageA.html
<link rel="stylesheet" href="../css/common.css">
//css
<style>
.sprite_01.logo-icon{
width: 33px;
height: 33px;
background-position:0 -19px;
}
.header .header-icon{
position:absolute;
left:10px;
}
</style>
//html
<div class="header">
<i class="sprite_01 hot-icon"></i>
<i class="sprite_01 logo-icon header-icon"></i>//sprite_01为其设置背景图，logo-icon为其设置具体的图标大小和背景图中某个图标位置，header-icon为图标布局，改变图标位置
</div>
