CSS图片精灵的简单用法

一道经典的面试题：请列出三种减少页面加载时间的方法？
图片精灵（Image Sprites）就是其中一种方法。

图像精灵是放入一张单独的图片中的一系列图像。
包含大量图像的网页需要更长时间来下载，同时会生成多个服务器请求。
使用图像精灵将减少服务器请求数量并节约带宽。

雪碧图

图片精灵也被称为雪碧图，因为我们常喝的雪碧的英文就是Sprites。Image Sprites被翻译成雪碧图也就不奇怪啦。

如下就是一张典型的雪碧图：

HTML：

<div class="start"></div>

CSS：

.start {
    width: 42px;
    height: 42px;
    background-image: url(https://y.gtimg.cn/mediastyle/mobile/app/share/img/sprite_play.png?max_age=2592000&d=20151203183007);
    background-size: 40px 350px;
    background-position: 0 -30px;
    background-repeat: no-repeat;
}

上面的代码效果，Output输出红心一枚：JSbin

可以看出其实特别简单，有如下几个属性：

属性：

• background-image: url() 定义背景图
• width、height 设置宽高
• background-size 定义整个背景图的尺寸
• background-position 定义背景图的偏移
• background-repeat: no-repeat; 设置背景图不重复

参考链接：

1.MDN：CSS 雪碧图