CSS Sprite的相關概念

原文

　　簡書原文：https://www.jianshu.com/p/8ae3be23a642

大綱

　　一、什麼是CSS Sprite
　　二、CSS Sprite的優勢
　　三、CSS Sprite的缺點
　　四、CSS Sprite的使用

一、什麼是CSS Sprite

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

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

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

二、CSS Sprite的優勢

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

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

　　2.三、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。

　　2.四、更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。

三、CSS Sprite的缺點

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

　　3.二、CSS Sprites在開發的時候比較麻煩，你要經過photoshop或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣；幸虧騰訊的鬼哥用ADOBE AIR開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，可是已經比photoshop測量來的方便多了，並且樣式直接生成，複製，拷貝就OK！

　　3.三、CSS Sprites在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動css。

　　3.四、CSS Sprites很是值得學習和應用，特別是頁面有一堆icon（圖標）。總之不少時候你們要權衡一下利弊，再決定是否是應用CSS Sprites。

四、CSS Sprite的使用

　　4.一、不要等到你完成切片以後纔開始sprite.若是你邊切圖邊寫CSS，而後等你完成了整個網站以後再來拼接這些圖片到一個Sprite中，你就不得不徹底重寫你的CSS，你也必需要花費不少的時間來用PS拼接大量的圖片。

　　4.二、將小圖片整合到一張大的圖片上,而後根據具體圖標在大圖上的位置，給背景定位(background-position)。