在網頁設計時，我們常常需要用到圖標或小圖片。通常的處理方式是將圖片上傳至服務器，再引用到網頁中。而使用CSS精靈技術，可以將多張小圖片合并為一張背景圖，并利用CSS來定位及顯示對應的小圖片，從而減少HTTP請求和加快頁面加載速度。

.sprite {
background: url('sprite.png') no-repeat;
}
.icon1 {
width: 30px;
height: 30px;
background-position: -10px -10px;
}
.icon2 {
width: 20px;
height: 20px;
background-position: -50px -30px;
}

在上述代碼中，我們首先定義了一個CSS類名為.sprite，表示整個CSS精靈圖的背景，其背景圖片為sprite.png，并設置依據背景定位（no-repeat）。在后面定義的.icon1和.icon2類分別表示兩個小圖標，其大小及背景圖片的位置可以通過設置其寬度、高度及背景定位位置來實現。

使用CSS精靈技術，我們可以大大減少小圖片的HTTP請求次數，從而提升網頁的性能。另外，通過將多張小圖片合并為一張大的背景圖，還可以方便的進行圖片的維護和管理。因此，CSS精靈技術在網頁設計中應用廣泛。