css精灵图

首先什么是精灵图？

精灵图是一种背景图片的应用方式，将很多常用的小图片集合到一个大图中，把整个大图做为一个背景图，然后通过  background-position 属性进行使用。

为什么要使用精灵图？

因为精灵图可以将多个小图合并到一张图，减少了图片的请求次数。

精灵图如何使用

精灵图的显示主要借助于背景位置来实现——background-position

创建一个精灵图的别名

如:  class: png

首首要在background-image 背景图片中导入 

然后给png设置为行内块，让精灵图的大小可以改变(完成后，后续需要用精灵图可以直接增加类名即可)

  /* 给精灵图的属性放倒后期有引用 */
        .png{
            display: inline-block;
            background-image: url(./img.精灵图.png);
        }

 在要使用的元素中加入 png 这个class名即可

比如：

 <div class="box">
        <!-- 用空格隔开代表是两个类名 -->
        <span class="title png"></span>
        <span class="text"></span>
    </div>

 进行了该设置以后，第一个span就可 使用精灵图了

重点来了，如何获取到自己想要的那个精灵图呢

用 background-position 属性调整其位置

    background-position: top;
    background-position: left;
    background-position: center;

但通过小图在大图中的左上标来显示更加的精准：

小图的坐标是通过其在左上角的位置来定的

background-position: 0px -4px;

同时也要设置引用小图的大小如：