css sprite 圖片背景定位技術

加速的關鍵，不是下降重量，而是減小個數。若是重量在200K之內，只要網絡不是特別慢，效率都差很少。可是，若是圖片個數多一倍，效率將明顯低一個檔次。

傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按Byte計算。客戶端每顯示一張圖片都會向服務器發送請求，因此，圖片越多請求次數越多，形成延遲的可能性也就越大。由於一張圖片的傳輸時間，一般遠小於請求等待的時間。

減小圖片的三個技巧(CSS Sprite)：

1. 圖片限制(Image Slicing)

典型如文本編輯器，小圖標特別多，打開時一張張跑出來，給用戶的感受很很差。若是用一張圖解決，則不會有這個問題，好比百度空間、163博客、Gmail都是這麼作的。

Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites

2. 單圖轉滾(Single-image Rollovers)

觸發切換圖片的需求，傳統方案得從新請求新圖片，由於網絡問題常常形成停留或等待。若是把多種狀態合併成一張圖，就能完美解決，而後再使用背景圖技術模擬動態效果。

ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/

3. 延長背景(Extend Background Image)

若是圖片的某邊能夠背景平鋪無限延長，則不須要每一個角、每條邊單獨搞出來，圖片能少一個就少一個。其實，這個理論還能夠擴展到四角容器裏，好處是能大大簡化HTML Structure。

  

Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/

綜合案例

Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/

CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/

  

藍色經典 http://www.blueidea.com/tech/site/2007/4750.asp