精灵图，雪碧图的应用

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>

效果：