了解雪碧图

所谓雪碧图就是讲很多小图标放在一张图上。其是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

这样做的好处

• 将多张图片合并到一张图片中，可以减小图片的总大小
• 将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗

---

使用时只需要调整图床的位置，使用background-position来定位。

 <div>
        <li class="cat1"><i></i><h3>服饰内衣</h3></li>
        <li class="cat2"><i></i><h3>鞋包配饰</h3></li>
        <li class="cat3"><i></i><h3>运动户外</h3></li>
        <li class="cat4"><i></i><h3>珠宝手表</h3></li>
    </div>

 div {
            border: black solid 1px;
            width: 150px;
        }
        li {
            list-style-type: none;
        }
        i{
            width: 30px;
            height: 24px;
            float: left;
            background: url(./123.png);
            margin: 2px 5px 0 5px;
        }
        .cat1 i {
            background-position: 0 0 ;
        }
        .cat2 i {
            background-position: 0 -24px ;
        }
        .cat3 i{
            background-position: 0 -48px;
        }
        .cat4 i{
            background-position: 0 -72px;
        }