2.4 CSS 精灵图/雪碧图使用

精灵图

将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片定位的技术。

优势：

1）通过图片整合来减少对服务器的请求次数，从而提高画面的加载速度。
2）通过整合图片来减少图片的体积

CssSprite

为了快捷我们可以借助工具CssSprite来合成精灵图，用法如下

添加图片之后可自由拖动图片，勾选CSS代码，软件会自动生成相对应的位置坐标，

    span {
        display: inline-block;
        background-image: url(./img.png);
        height: 76px;
        width: 270px;
        background-position: 0 0;
    }