為什麼要用CSS精靈圖

為什麼需要精靈圖？

一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，伺服器就會頻繁地接收和發送請求圖檔，造成伺服器請求壓力過大，這将大大降低頁面的加載速度。

是以，為了有效地減少伺服器接收和發送請求的次數，提高頁面的加載速度，出現了 CSS 精靈技術（也稱 CSS Sprites、CSS 雪碧）。 

核心原理：将網頁中的一些小背景圖像整合到一張大圖中 ，這樣伺服器隻需要一次請求就可以了。 

精靈圖（sprites）的使用 

1. 精靈技術主要針對于背景圖檔使用。就是把多個小背景圖檔整合到一張大圖檔中。 

2. 這個大圖檔也稱為 sprites  精靈圖  或者 雪碧圖 

3. 移動背景圖檔位置， 此時可以使用 background-position 。 

4. 移動的距離就是這個目标圖檔的 x 和 y 坐标。注意網頁中的坐标有所不同 

5. 因為一般情況下都是往上往左移動，是以數值是負值。（千萬注意網頁中的坐标： x軸右邊走是正值，左邊走是負值， y軸同理。）  

6. 使用精靈圖的時候需要精确測量，每個小背景圖檔的大小和位置。 

background: url(images/sprites.png) no-repeat  -155px -106px;