CSS精靈圖是一種用于優(yōu)化網頁加載速度和減少服務器響應時間的CSS技術，通過CSS精靈圖，我們可以將多個小圖像合并到一個圖像文件中，并利用CSS的background-position屬性來定位每個圖像的位置，這樣，當網頁加載時，只需要請求一個圖像文件，而不是多個小圖像文件，從而提高了網頁的加載速度。

要編寫CSS精靈圖，我們需要先準備好一個圖像文件，可以是png、jpg等格式的圖片，在CSS中定義一個類，用于設置背景圖像和定位，我們可以定義一個類sprite-icon，用于顯示一個圖標。

.sprite-icon {
  background-image: url('sprite.png');
  background-position: 0 0;
  width: 32px;
  height: 32px;
}

在上面的代碼中，url('sprite.png')指定了精靈圖的路徑，background-position: 0 0;表示圖像的起始位置，width和height屬性定義了元素的大小。

我們可以將需要顯示的圖標添加到HTML中，并應用sprite-icon類。

<i class="sprite-icon"></i>

通過這種方法，我們可以輕松地創(chuàng)建和優(yōu)化網頁上的圖標和其他小圖像，提高網頁的加載速度和性能。