CSS 精靈圖是一種優化網頁性能和加載速度的技術。它可以將多張小圖片合并成一張大圖片，減少了頁面請求次數，從而提升了網頁的響應速度和用戶體驗。

使用 CSS 精靈圖需要以下兩個步驟：

1. 合并圖片
2. 在 CSS 中引用合并后的大圖片

下面我們詳細介紹一下如何使用 CSS 精靈圖：

1. 合并圖片

將多張小圖片合并成一張大圖片，可以使用類似 Photoshop 等工具，也可以使用在線工具。這里我們以在線工具CSS Sprites Generator為例。

步驟：

1. 打開網站，并上傳需要合并的圖片。
2. 點擊“Generate Sprites”按鈕，生成精靈圖。
3. 下載生成的圖片。

生成的精靈圖如下：

.sprite {
background-image: url('sprite.png');
background-repeat: no-repeat;
}

這里 .sprite 是一個 CSS 類，表示需要使用精靈圖的元素。background-image 屬性指定了精靈圖的地址，background-repeat 屬性設置為 no-repeat，防止在 CSS 精靈圖中出現重復的圖片。

2. 在 CSS 中引用合并后的大圖片

在 CSS 中引用合并后的大圖片，需要使用 background-position 屬性來指定要顯示的圖片在精靈圖中的位置。在如下示例中，我們使用了兩個小圖片 icon1.png 和 icon2.png，將它們合并成了一個精靈圖 sprite.png：

/* 引用精靈圖 */
.sprite {
background-image: url('sprite.png');
background-repeat: no-repeat;
}
/* 設置圖標 */
.icon1 {
background-position: 0px 0px;
width: 20px;
height: 20px;
}
.icon2 {
background-position: -20px 0px;
width: 20px;
height: 20px;
}

這里 .icon1 和 .icon2 分別表示需要使用的小圖片，通過設置 background-position 屬性來指定它們在精靈圖中的位置。同時，為了保證圖片顯示正確，需要設置每個圖標的寬度和高度。

這樣，我們就成功地實現了 CSS 精靈圖的使用。通過將多張小圖片合并成一張大圖片，以及指定要顯示的圖片在精靈圖中的位置，可以大大提升網頁的性能和加載速度。