CSS雪碧图的使用场景及操作步骤

雪碧图

雪碧图即CSS Sprite，是把多个小图标合并在一张图片上，然后通过CSS背景定位来显示需要显示的图片部分。通过使用这种方法，可以减少加载网页图片时对服务器的请求次数，提高网页的加载速度。

雪碧图的使用场景

1. 静态图片，不随用户信息的变化而变化。
2. 页面中的图标。
3. 图片加载量比较大。

雪碧图的操作步骤

eg：如下图，我们要选择使用这张图片上的第一个小图标：

步骤：
step1：设置标签的尺寸（宽、高），即雪碧图引用图片的尺寸。
step2：引用图片（以背景图方式）。
step3：设置背景图片的位置，即所要引用的部分图片在引用图片的位置。

html代码

<div>
    <i></i>
    <span>首页</span>
</div>

css代码

div>i {
     width: 22px;
     height: 20px;
     display: inline-block;
     background-image: url(./IMG/icon.png);
     background-position: 0 0;
}

显示效果如下图：

注：如果是在移动端中使用雪碧图，还需要设置background-szie为图片的大小，这样雪碧图也可以自适应视口的大小。