精靈圖（Sprite）是將多張圖片合并成一張大圖，通過css設(shè)置background-position來顯示需要的圖片，減少網(wǎng)絡(luò)請求，加快頁面加載速度的方法。下面我們就來介紹如何使用html設(shè)置精靈圖。

//html代碼
<div class="sprite"></div>
//css代碼
.sprite {
background-image: url('sprite.png');
width: 30px;
height: 30px;
background-position: -10px -10px;
}

以上代碼中，我們設(shè)置了一個(gè)類名為sprite的空div，并通過css設(shè)置其背景圖片為sprite.png。同時(shí)，我們還設(shè)置了div的寬和高為30px，最后通過background-position來設(shè)置需要顯示的圖片，例如這里是顯示sprite.png中的第一張圖片，左偏移10px，上偏移10px。

接下來我們來看一下如何設(shè)置精靈圖的hover效果：

//html代碼
<div class="sprite-hover"></div>
//css代碼
.sprite-hover {
background-image: url('sprite.png');
width: 30px;
height: 30px;
background-position: -10px -10px;
}
.sprite-hover:hover {
background-position: -50px -10px;
}

以上代碼中，我們設(shè)置了一個(gè)類名為sprite-hover的空div，并和之前一樣，通過css設(shè)置其背景圖片為sprite.png，寬和高為30px，初始顯示的是第一張圖片，左偏移10px，上偏移10px。然后我們通過:hover偽類設(shè)置鼠標(biāo)懸浮時(shí)顯示的圖片，是第二張圖片，左偏移50px，上偏移10px。

通過以上介紹，相信大家已經(jīng)學(xué)會(huì)如何使用html設(shè)置精靈圖了。使用精靈圖能夠有效優(yōu)化頁面加載速度，減少網(wǎng)絡(luò)請求，提高用戶體驗(yàn)，是前端工程師必不可少的技能之一。