sprites是鬼怪，小妖精，調皮鬼的意思，初聽這個高端洋氣的名字我被震懾住了，一步步掀開其面紗後發覺很簡單的東西，作用卻很大
什麼是CSS Sprites
CSS Sprites是指把網頁中很多小圖片（很多圖標文件）做成按規律排列的一張大圖上，在顯示的時候通過background-image、background-position顯示圖片特定部分達到和分散的一張張小圖片一樣的效果。
JqueryUI的效果圖如下
很多頁面常用的小圖標，但是我們看看每個小圖標的源碼的時候會發現，這些小圖標的src是同一個文件，都是這張大圖
爲什麼要使用CSSSprites
姑且先不管這是怎麼實現的，我們先來了解一下又好好的方法它不用爲什麼要用這種怪異的方式，在代碼書寫和可讀性上都有了一定程度的開銷，這麼幹有什麼好處能讓人們放棄安逸的做法來用CSS sprites呢？
- 瀏覽器加載圖片爲阻塞形式
我們知道瀏覽器在加載網頁的時候圖片文件及外部的JS、CSS文件都需要單獨下載，但JS是堵塞HTML下載進程的，圖片是另外開啓進程來下載的，不同的瀏覽器同時下載圖片的數量的限制一般爲一個或者五個或者十個，所以如果一個遍佈了圖片的網頁，或者一系列網頁，即使你網速再快也要分批次的下載這些圖片。
- 圖片下載爲一次完整的http請求
每個圖片的下載都是一次完整的HTTP請求-響應。而把很多小圖片集中到一張圖片上這樣在只需要一個HTTP請求-響應，在現在網速條件下不超過200k的圖片下載速度是差不多的，下載一次之後無論是該頁面還是站點其它頁面使用包含在這張大圖上的圖片的時候就可以使用緩存，不會帶來反覆下載的開銷，所以只有一個HTTP請求-響應。
- Sprites減少HTTP請求
所以使用CSS sprites最大的好處就是減少HTTP請求，加快網站響應速度，提高網站性能。也許會問，多幾個HTTP請求真的會那麼嚴重嗎？如果使用一張大圖，那麼很可能大圖中有幾個圖片用不到，這不是多加載內容了嗎，和多幾次HTTP請求開銷差距有那麼大嗎？
CSS Sprites實現
首先了解一下CSS的 background-position
background-position設置或檢索對象的背景圖像位置。必須先指定 background-image屬性。
語法：
background-position: length || length
background-position: position || position
取值：
length :百分數 |由浮點數字和單位標識符組成的長度值。
position :top | center | bottom | left | center |right
如：
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
我們看到使用的url爲同一個圖片，知識postion時，圖片的鎖定位置有變動。
小結：
CSS Sprites的缺點：凡事有利必有弊端。可能有人喜歡，有人不喜歡，因爲每次圖片改動都要往這張圖片添加內容，圖片的座標定位要很準確會，會稍顯繁瑣。座標定位要固定爲某個絕對值，因此會失去如center的一些靈活屬性。
CSS Sprites 有優點也有缺點。要不要使用，具體要看網頁以加載速度爲主還是以維護方便容易爲主。
