sprites 精灵图（雪碧图）

什么是精灵图

css精灵(CSS sprites)，又称雪碧图,是一种网页图片应用处理技术。

精灵技术主要针对于背景图片使用，把多个小背景图片整合到一张大图片中，这个大图片也称为 sprites 精灵图 或者 雪碧图，借助于背景位置来实现—background-position，移动的距离就是这个目标图片的 x 和 y 坐标。

为什么要使用精灵图（作用）

一个网页中往往会应用很小的背景图作为修饰,当网页上的图像过多时,服务器就会频繁的接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的速度。因此为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了css精灵技术（也称csssprites、css雪碧）

精灵图的优点

1. 减少网页的http请求，从而加快了网页加载速度，提高用户体验。
2. 减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。
3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

精灵图的优点

1. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。
2. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置。
3. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。
4. 精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图。

实现原理

利用CSS的"background-image",“background-repeat”,"background-position"的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。

实例

    <ul>
        <li class="sprites1"></li>
        <li class="sprites2"></li>
        <li class="sprites3"></li>
        <li class="sprites4"></li>
    </ul>

        ul li {
    
    
            list-style: none; /* 清除ul默认样式 */
            margin: 50px;
            float: left;
            width: 16px;
            height: 16px;
            background-color: #ccc;
            background-image: url(./un_icon_index_type20170111.png);
        }
        .sprites1 {
    
     background-position: 0 0; }
        .sprites2 {
    
     background-position: -26px -26px; }
        .sprites3 {
    
     background-position: 0 -26px; }
        .sprites4 {
    
     background-position: -24px -79px; }