在加载图片时，每加载一次，就向网络中发送一次请求
icon为小图标，同样需要向网络发送请求
为了节省网络资源，将页面中需要用到的icon集成到一张图中，使用时，只需发送一次请求即可
在css文件中使用时，只需要使用到icon在整张图中的相对位置即可，使用background-position:;是icon显示出来
<body>
<div class="icon icon-1"></div>
<div class="icon icon-2"></div>
</body>
.icon{
background-color: #ccc;
/*将精灵图设为背景图片*/
/*背景透明的图片后缀为png*/
background-image: url(../img/index.png);
/*设置背景图片不平铺*/
background-repeat: no-repeat;
}
.icon-1{
600px;
height: 600px;
/*图片在容器中的位置*/
/*背景居中*/
background-position: center;
}
.icon-2{
/*icon大小*/
55px;
height: 55px;
background-position: -187px 0px;
}