CSS精靈技術（sprite）

精靈技術產生的背景

 當用戶訪問一個網站時，須要向服務器發送請求，網頁上的每張圖像都要通過一次請求才能展示給用戶。

然而，一個網頁中每每會應用不少小的背景圖像做爲修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大下降頁面的加載速度。爲了有效地減小服務器接受和發送請求的次數，提升頁面的加載速度，出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。

精靈技術本質

簡單地說，CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的全部零星背景圖像都集中到一張大圖中去，而後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像便可所有展現出來。一般狀況下，這個由不少小的背景圖像合成的大圖被稱爲精靈圖（雪碧圖）

精靈技術的使用

CSS 精靈實際上是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素一般只須要精靈圖中不一樣位置的某個小圖，要想精肯定位到精靈圖中的某個小圖，就須要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。

製做精靈圖

CSS 精靈實際上是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那咱們要作的，就是把小圖拼合成一張大圖。

大部分狀況下，精靈圖都是網頁美工作。

精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。
精靈圖的寬度取決於最寬的那個背景。
能夠橫向擺放也能夠縱向擺放，可是每一個圖片之間，間隔至少隔開偶數像素合適。
在精靈圖的最低端，留一片空隙，方便咱們之後添加其餘精靈圖。