CSS精靈素材圖是一種將多個(gè)小圖標(biāo)合并到一個(gè)大圖標(biāo)中的技術(shù)，從而減少網(wǎng)頁加載時(shí)間和HTTP請(qǐng)求。通常，一張背景圖會(huì)包含所有需要的小圖標(biāo)，并通過background-position屬性來控制顯示哪一個(gè)圖標(biāo)。

.icon {
width: 20px;
height: 20px;
background-image: url(sprite.png);
}
.btn-add {
background-position: 0 0;
}
.btn-delete {
background-position: -20px 0;
}
.btn-edit {
background-position: -40px 0;
}

在上面的代碼例子中，我們使用了一個(gè)名為sprite.png的精靈圖，里面包含三個(gè)20x20像素的圖標(biāo)。為了引用其中的圖標(biāo)，我們設(shè)置了一個(gè)類名為.icon，并在不同的按鈕元素上使用不同的背景位置來顯示不同的圖標(biāo)。

CSS精靈素材圖的好處是減少了HTTP請(qǐng)求，從而加快了網(wǎng)頁的加載速度。除此之外，使用精靈圖還可以減少文件大小和服務(wù)器負(fù)載。但是，需要小心使用精靈圖的大小和復(fù)雜度，以防止影響頁面性能。