爲何用 CSS Sprites

在分析各個網站的CSS時，咱們常常能夠看到一些網站有不少的元素共享了一張背景圖片，而這張背景圖片包含了全部這些元素須要的背景，這種技術就叫作CSS Sprites。

   例如淘寶的css sprites

   URL是http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif

   

   這樣作有什麼好處呢？

   顯而易見，瀏覽器在載入每一張圖片的時候都會發起一個HTTP請求。

   若是使用CSS Sprites技術，將全部的圖片合成一張圖片，那麼，這樣多個HTTP請求會被合成一個HTTP請求。

   這樣就既能大大下降後臺服務器的開銷，又能加快網頁載入速度。

   CSS Sprites原理：

   CSS Sprites是經過背景圖片外加背景圖片定位來實現的。如今作一個簡單的實驗：

   咱們以淘寶的圖片爲例，在html裏面插入一個div，寬高爲200px*100px，

   a.將圖片的偏移設置爲

   

   圖像顯示效果以下：

   

   b.將圖片的偏移設置爲

   

   圖像的顯示效果以下：

   

   這樣，一個簡單的CSS Sprites就實現了。

   CSS Sprites優勢

   CSS Sprites爲何忽然跑火，跟可以提高網站性能有關。顯而易見，這是它的巨大優勢之一。

   1.利用CSS Sprites能很好地減小了網頁的http請求，從而大大的提升了頁面的性能，這是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；

   2.我的認爲CSS Sprites能減小圖片的字節，我曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

   CSS Sprites缺點

   誠然CSS Sprites是如此的強大，可是也存在一些不可忽視的缺點。

   1.在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好只夠的空間，防止板塊內不會出現沒必要要的背景，不然可能會出現出現干擾圖片的狀況；這些還好，作痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；

   2.CSS Sprites在開發的時候比較麻煩，你要經過photoshop或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣；不過網上已經有高手開發出「CSS Sprites 樣式生成工具」，你們能夠嘗試一下。

   3.CSS Sprites在維護的時候比較麻煩，sprites是通常雙刃劍，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，有隻能(最好)往下加圖片，這樣圖片的字節就增長了，由於每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣，並且從新算圖片的位置(尤爲是這種上千px的圖)也是一件頗爲不爽的事情。固然，在性能的口號下，這些都是能夠克服的。

   4.因爲圖片的位置須要固定爲某個絕對數值，這就失去了諸如center之類的靈活性。