1. 為什麼需要精靈圖

一個網頁中會需要很多小的背景作為修飾，若圖像過多服務器頻繁接收&發送會造成服務器壓力過大，將降低頁面加載速度

因此，為了有效減少服務器壓力提高頁面的加載速度，就使用CSS精靈圖技術來解決問題 ( 也稱 CSS Sprites , CSS雪碧)。

核心原理 : 將網頁中的小背景圖像整合到大圖中，這樣服務器就只需要一次請求即可。

精靈圖技術目的 : 為了有效減少服務器接收&發送請求的次數，提高頁面的加載速度

2. 精靈圖的使用

a. 精靈圖技術主要針對背景圖片使用，就是把多個小背景圖片整合到一張大圖片中。
b. 這個大圖片也稱Sprites 精靈圖 或者 雪碧圖
c. 移動背景圖片位置，可以使用background-position。
d. 移動的距離就是這個目標圖片的 x 和 y 座標。注意網頁中的座標有所不同
e. 因為一般情況下都是往上往左移動，所以是負值
f. 使用精靈圖時需要精確測量每個小背景圖片的大小和位置

3. 總結

a. 精靈圖主要針對小的背景圖片使用
b. 主要藉助於背景位置來實現—background-position。
c. 一般情況下精靈圖都是負值。

(X軸右邊為正值，左邊為負 y軸同理)

w3school 精靈圖說明