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

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

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

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