CSS精靈圖片是一個將多個小圖片合并為一張大圖片，通過改變背景圖片的位置來顯示所需小圖片的技術(shù)。這種技術(shù)的好處在于可以減少HTTP請求次數(shù)，從而提高網(wǎng)站的性能，并且只需要一張圖片就可以顯示所有相關(guān)的圖標(biāo)。

.icon {
background-image: url(sprite.png);
background-repeat: no-repeat;
}
.icon-home {
width: 50px;
height: 50px;
background-position: 0 0; /* 顯示精靈圖片中的home圖標(biāo) */
}
.icon-mail {
width: 50px;
height: 50px;
background-position: -50px 0; /* 顯示精靈圖片中的mail圖標(biāo) */
}

如上所示，在CSS中創(chuàng)建一個類名為“icon”的元素，并將其背景圖片設(shè)置為精靈圖片。然后，創(chuàng)建其他類名的元素，分別設(shè)置它們的背景位置，即可在網(wǎng)頁中顯示所需的小圖標(biāo)。

通過使用CSS精靈圖片，可以有效地減少頁面請求次數(shù)，加快頁面加載速度，提升用戶體驗。