什么是精灵图？如何使用精灵图。

精灵图可以叫雪碧图也叫css sprites

一. 精灵图的实质其实就是利用背景图和背景图的位置去显示同一张图上，不同位置的图片，进而，在引入一张图的前提下，显示不同的图片的技巧。它适合：一般小图标素材。

二.优缺点

优势：
加快网页加载速度
浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染
后期维护简单
该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用
缺点：
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况;

---

那么如何使用呢，今天我就来教大家。

首先用div建立几个盒子来存放精灵图（记住精灵图是重复使用的）如下：

html代码：

    <div class="a">
        <p>职场取经</p>
        <div class="b">
            <div class="c">
                求职技巧
            </div>
            <div class="d">
                行业薪资
            </div>
            <div class="e">
                简历模板
            </div>
            <div class="f">
                就业指导
            </div>
            <div class="g">
                实习兼职
            </div>
            <div class="h">
                沟通技巧
            </div>
        </div>
    </div>

css代码：

    <style>
        .a {
            border: 1px solid wheat;
            width: 240px;
        }

        .b {
            display: flex;
            height: 160px;
            flex-wrap: wrap;
            padding: 10px;
            justify-content: center;
        }

        p {
            margin: 11px 13px;
            color: #b0aeae;

        }

        .c,
        .d,
        .e,
        .f,
        .g,
        .h {
            display: flex;
            min-width: 70px;
            min-height: 70px;
            align-items: flex-end;
            justify-content: space-around;
            background-image: url("img/ToolsIcon.png");
            background-repeat: no-repeat;/* 不让图片重复排布 */
            background-position: 25px 20px;/* 调整图片的位置 */
            color: #b0aeae;
        }

        .d {
            background-position: 25px -50px;
        }

        .e {
            background-position: 25px -120px;
        }

        .f {
            background-position: 25px -190px;
        }

        .g {
            background-position: 25px -260px;
        }

        .h {
            background-position: 25px -330px;/* 后面的这个-330px主要看图片之间的间距是多*/
        }
    </style>

那么来看看完整的效果图吧！

再来分享一波我用的精灵图吧：

今天我的分享就到这里，我下次再来分享一些有趣的代码。