1.什么是精灵图？

     精灵图就是一张图片中显示了页面中多个地方使用的图片，如

2.为什么使用精灵图？

     使用精灵图可以减少加载图片的次数，当引入一次图片后，后面再使用就不用再请求资源，提高效率

3.怎么使用精灵图？

   将精灵图作为背景图片引入，在利用图片定位进行调整位置

  div {
                  background：url();
                  background-position:x y;
        }

 例子：

<div class="xuebis"><span>17.10.15</span></div><style>
.xuebis {width: 100%;height: 18px;margin-top: 16px;margin-bottom: 16px;/* background: pink; */
}.xuebis>span {display: inline-block;/* width: 76px; */height: 18px;margin-right: 15px;/* background: darkcyan; */background: url(../images/icon.png);text-indent: 16px;font-size: 12px;
}.xuebis>span:first-child {background-position: 0px 2px;
}.xuebis>span:nth-child(2) {background-position: 0px -14px;
}.xuebis>span:nth-child(3) {background-position: 0px -31px;
}.xuebis>span:last-child {background-position: 0px -47px;
}
</style>

效果：