雪碧圖的使用

在前端的頁面中，不免會用到許多的圖片，若是每個位置的圖片都須要一張張的圖片，那樣不只會佔用大量的空間，並且會下降網頁的速度。

css雪碧圖(sprite)（也叫精靈圖等）就是一種網頁圖片應用處理方式，它容許將一個頁面涉及到的全部零星圖片都包含到一張大圖中。使用雪碧圖的處理方式能夠實現兩個優勢：

【1】減小http請求次數

【2】減小圖片大小，提高網頁加載速度 (多張圖片加載速度小於拼合成的圖片的加載速度)

應用方面：

【1】靜態圖片，不隨用戶信息的變化而變化(一般在網站上以常態的形式存在)。

【2】小圖片，圖片容積比較小。

【3】對於img標籤設置的內容性圖片，是不能合併到雪碧圖的，若是合併這些圖片會影響頁面可讀性，語義化下降且可調整的範圍小。

【4】對於橫向和縱向都平鋪的圖片，也不能合併到雪碧圖中。若是是橫向平鋪，只能將全部橫向平鋪的圖合併成一張大圖，只能豎直排列，不能水平排列;若是是縱向平鋪，只能將全部縱向平鋪的圖合併成一張大圖，只能水平排列，不能豎直排列。

雪碧圖的使用主要經過將所須要的圖片經過軟件(主要是Photoshop 或Fireworks )經過必定的規則(間隙，間距，行高的等)整合到一張大的圖片裏，而後再經過CSS樣式中「background-image」，「background- repeat」，「background-position」等基本樣式進行處理，以便運用到網頁中所須要的位置上。