CSS精靈圖是一種將多個(gè)小圖標(biāo)集中到一個(gè)大圖中，通過(guò)background-position來(lái)控制顯示某個(gè)小圖標(biāo)的方式。這種技術(shù)可以減少網(wǎng)頁(yè)中對(duì)于小圖標(biāo)的http請(qǐng)求次數(shù)，從而達(dá)到提高網(wǎng)站性能的目的。

.icon{
background-image:url(sprite.png);
background-repeat:no-repeat;
display:inline-block;
}
.add{
width:16px;
height:16px;
background-position:-10px -20px;
}
.delete{
width:16px;
height:16px;
background-position:-10px -40px;
}

在這段代碼中，我們先聲明了一個(gè) .icon 的類，該類在background-image中引用了一個(gè)名為sprite.png的圖片，該圖片包含了多個(gè)小圖標(biāo)。我們接下來(lái)分別聲明了 .add 和 .delete 兩個(gè)類，來(lái)控制顯示不同的小圖標(biāo)。其中background-position屬性通過(guò)指定該小圖標(biāo)在sprite.png圖片上的位置來(lái)正確顯示對(duì)應(yīng)的圖標(biāo)。通過(guò)在HTML元素中同時(shí)指定 .icon 和 .add 或 .delete 來(lái)顯示對(duì)應(yīng)的小圖標(biāo)。

需要注意的是，在使用CSS精靈圖的時(shí)候，圖片中的小圖標(biāo)需要切割得清晰明了，并且在合成大圖時(shí)，需要注意保證小圖標(biāo)之間的距離，避免出現(xiàn)顯示異常的情況。