在 CSS 中實現圖片精靈
影像精靈在許多使用多個影像的 Web 應用程式中都有用到。與其將每個影像作為單獨的影像檔案包含進來，不如將它們作為單個影像傳送，這樣能更有效地利用記憶體和頻寬；透過使用背景位置來區分同一影像檔案中的單個影像，從而減少 HTTP 請求的數量。
注意：當使用 HTTP/2 時，使用多個小的請求實際上可能更節省頻寬。
實現
假設給每個類名為 tool-btn 的專案一個影像
css
.tool-btn {
background: url("myfile.png");
display: inline-block;
height: 20px;
width: 20px;
}
背景位置可以作為兩個 x, y 值新增到背景中的 <url> 之後，也可以作為 background-position。例如
css
#btn1 {
background-position: -20px 0px;
}
#btn2 {
background-position: -40px 0px;
}
這將使 ID 為 btn1 的元素的背景影像起始點向左滑動 20 畫素，ID 為 btn2 的元素的背景影像起始點向左滑動 40 畫素（假設它們都分配了 tool-btn 類並受上述影像規則的影響）。
類似地，你也可以透過定位 #btn:hover 來建立懸停狀態。