CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做CSS精灵技术，也叫作CSS雪碧图
图片位置可以通过Photoshop的切片工具来进行测量。
CSS精灵可以减少HTTP请求数，加快网页显示速度。缺点也很明显:不方便测量、后期改动麻烦
示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.money {
position: absolute;
top: 200px;
left: 200px;
width: 34px;
height: 20px;
border: 1px solid #000;
background: url(./images/sprites.png) no-repeat center center;
background-position: 0 -1280px;
}
</style>
</head>
<body>
<i class="money"></i>
</body>
</html>