前端學習之CSS——精靈圖

1. 精靈圖

1.1 爲何須要精靈圖

一個網頁中每每會應用不少小的背景圖像做爲修飾，當網頁中的圖像過多時，服務器就會頻繁地接收和發送請求圖片，形成服務器請求壓力過大，這將大大下降頁面的加載速度。

• 爲何使用精靈圖（目的）：
  爲了有效地減小服務器接收和發送請求的次數，提升頁面的加載速度，出現了 CSS 精靈技術（也稱 CSS Sprites、CSS 雪碧）。
• 核心原理：
  將網頁中的一些小背景圖像整合到一張大圖中 ，這樣服務器只須要一次請求就能夠了。
• 精靈圖舉例:
  

1.2 精靈圖（sprites）的使用

使用精靈圖核心：

1. 精靈技術主要針對於背景圖片使用。就是把多個小背景圖片整合到一張大圖片中。
2. 這個大圖片也稱爲 sprites 精靈圖 或者 雪碧圖
3. 移動背景圖片位置， 此時能夠使用 background-position 。
4. 移動的距離就是這個目標圖片的 x 和 y 座標。注意網頁中的座標有所不一樣
5. 由於通常狀況下都是往上往左移動，因此數值是負值。
6. 使用精靈圖的時候須要精確測量，每一個小背景圖片的大小和位置。

使用精靈圖核心總結：

1. 精靈圖主要針對於小的背景圖片使用。
2. 主要藉助於背景位置來實現—background-position 。
3. 通常狀況下精靈圖都是負值。（千萬注意網頁中的座標： x軸右邊走是正值，左邊走是負值， y軸同理。）