CSS Sprites–網站CSS背景圖片定位

這個技巧已經廣泛的應用到現在的頁面的前端開發中，甚至YUI將他定為《提高網頁效率的14條準則》的第一條準則“Make Fewer HTTP Requests” ，可見這個技術的重要性，也正是YUI的推薦
使這個CSS技巧得到了廣泛的推廣和應用。

先來看個最簡單的DEMO：
這是背景圖片：

這是一個簡單的CSS Sprites的demo:

 

XML/HTML代碼：<br /><div style="“float:left;" mce_style="“float:left;" width:120px; padding-left:20px; background:url(ico.png) left top no-repeat”>這裡顯示紅叉</div><br /><div style="“float:left;" mce_style="“float:left;" width:120px; padding-left:20px; background:url(ico.png) left -32px no-repeat”>這裡顯示綠勾</div><br /><div style="“float:left;" mce_style="“float:left;" width:120px; padding-left:20px; background-image:url(ico.png); background-position:left top; background-repeat:no-repeat”>這裡顯示紅叉</div><br /><div style="“float:left;" mce_style="“float:left;" width:120px; padding-left:20px; background-image:url(ico.png); background-position:0 -32px; background-repeat:no-repeat”>這裡顯示綠勾</div>  

CSS Sprites原理
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

 
CSS Sprites優點
1.利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的效能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2.個人認為能CSS Sprites能減少圖片的位元組，我曾經比較過多次3張圖片合并成1張圖片的位元組總是小於這3張圖片的位元組總和。 

 

CSS Sprites缺點
誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點
1.在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好只夠的空間，防止板塊內不會出現不必要的背景；這些還好，做痛苦的是在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；