一道經(jīng)典的面試題：請(qǐng)列出三種減少頁(yè)面加載時(shí)間的方法？
圖片精靈（Image Sprites）就是其中一種方法。

圖像精靈是放入一張單獨(dú)的圖片中的一系列圖像。
包含大量圖像的網(wǎng)頁(yè)需要更長(zhǎng)時(shí)間來下載，同時(shí)會(huì)生成多個(gè)服務(wù)器請(qǐng)求。
使用圖像精靈將減少服務(wù)器請(qǐng)求數(shù)量并節(jié)約帶寬。

雪碧圖

圖片精靈也被稱為雪碧圖，因?yàn)槲覀兂：鹊难┍痰挠⑽木褪荢prites。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

可以看出其實(shí)特別簡(jiǎn)單，有如下幾個(gè)屬性：

屬性：

• background-image: url() 定義背景圖
• width、height 設(shè)置寬高
• background-size 定義整個(gè)背景圖的尺寸
• background-position 定義背景圖的偏移
• background-repeat: no-repeat; 設(shè)置背景圖不重復(fù)

參考鏈接：

1.MDN：CSS 雪碧圖