一道經(jīng)典的面試題：請(qǐng)列出三種減少頁(yè)面加載時(shí)間的方法？
圖片精靈（Image Sprites）就是其中一種方法狡门。
圖像精靈是放入一張單獨(dú)的圖片中的一系列圖像值纱。
包含大量圖像的網(wǎng)頁(yè)需要更長(zhǎng)時(shí)間來(lái)下載今穿，同時(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ù)
