css sprite原理優缺點及使用示例介紹

2024-07-11 08:28:17

字體：大中小

來源：轉載

供稿：網友

CSS Sprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。

利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；

CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。

傳統切圖思想進行操作，講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按Byte計算。客戶端每顯示一張圖片都會向服務器發送請求，所以，圖片越多請求次數越多，造成延遲的可能性也就越大。因為一張圖片的傳輸時間，通常遠小于請求等待的時間。典型如文本編輯器，小圖標特別多，打開時一張張跑出來，給用戶的感覺很不好。如果能用一張圖解決，則不會有這個問題

加速的關鍵，不是降低重量，而是減少個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求，所以，圖片越多請求次數越多，造成延遲的可能性也就越大。

CSS Sprites原理

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

CSS Sprites優點

　　利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
　　CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。

CSS Sprites缺點

　　誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點
　　在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內不會出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
　　CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用RIA開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，復制，拷貝就OK！

上一篇：Css樣式--字體樣式和鏈接樣式詳解

下一篇：CSS中display:block的作用介紹