css 雪碧圖

CSS Sprite初探之原理、使用

CSS Sprite簡介：
利用CSS Sprites能很好地減小了網頁的http請求次數，從而大大的提升了頁面的性能,節省時間和帶寬。
CSS Sprites在國內不少人叫css精靈， 是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅 一幅地慢慢顯示出來了。對於當前網絡流行的速度而言，不高於200KB的單張圖片的所需載入時間基本是差很少的，因此無需顧忌這個問題。
加速的關鍵，不是下降重量，而是減小個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按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 Sprites在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動css。
CSS Sprites很是值得學習和應用，特別是頁面有一堆ico（圖標）。總之不少時候你們要權衡一下利弊，再決定是否是應用CSS Sprites。
CSS Sprites圖片切割術
1. CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position通常採用數字組合形式定位，這樣能減小維護帶來的沒必要要麻煩。
2. 不建議CSS Sprites圖片中保持必定的間距，由於文件size增大而增長文件體積。
3. CSS Sprites圖片中把顏色較近或相同的組合在一塊兒能夠下降顏色數，由於少色數的圖片文件體積會相對的小。
4. size相同的CSS Sprites圖片中留有較大空隙，某程度上多數狀況會增大了體積，因此CSS Sprites的圖片不要有空隙。
5. 在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。
6. 在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。
7. 圖片對等合併：應用CSS Sprites圖片時，適當地把對等相同的圖像合併，以節省空間及減小體積。
8. 區分開不須要合併的圖像：如當前用戶肯定只顯示一種狀態或一個級別時，沒必要要把其餘的級別或狀態的圖片合併。
9. 黃金切割位：在CSS Sprites圖片的最右或左邊爲最靈活動位置最適宜擺放文本前的icon，所以不會受到其它CSS Sprites圖片干預，也不須要預留必定的行寬。
10. 有的說定位時避免使用bottom或right等，當使用CSS sprite的時候，只用background-position: bottom -300px或background-position: right -200px;很是容易。這剛開始的時候是可行的，可是問題是，當你在寬度上或高度上擴展相關sprite圖片的時候，原先設置的位置多是錯的，由於那 個圖片已經再也不Sprite圖片的底部或右部了。使用確切的位置來避免這個問題。
其實我感受通常狀況寬度圖不片不會改應變，用RIGHT和 LEFT仍是挺方便的，但從總體考慮，升級了。改版的。圖片寬度仍是有可能會改變的。必竟開始時作太寬也沒什麼好處，仍是浪費不少空間。就是多費點時間去對座標，最好仍是不用RIGHT 和 LEIFT的了。
11. 有的說竟給每一個圖片足夠的空間就像你在本文頂部的實例圖片看到的那樣，那些小圖片都被預留了足夠的空間。爲何不把他們塞到一塊來讓sprite圖片更小呢? 由於使用這些圖片的元素一般都會有大量的內容並且可能會須要擴展的間距，以致於其它圖片不會意外出現。
使用CSS Sprite 的好處？
CSS Sprites(圖片整合技術) 的目的就是經過整合圖片，減小對服務器的請求數量，從而加快頁面加載速度。以下圖所示:

 
如何來製做?
基本的原理，就是利用background-postion的負值來進行調節。
當咱們定位於background-position:-50px -50px;時發現圖片向左上，移動了，也就以DIV的左上角爲中心，圖向左移動了50PX，向上也移動了50PX．

參考點： 以圖片爲(0,0)爲原點。

 
背景圖片的定位取圖問題
咱們知道在用圖片做爲背景的時候，css要這樣寫，以div容器舉例子，也能夠是body、td、p等的背景，道理同樣。
代碼：
div{ background:#FFF url(image) no-repeat fixed x y;}

這裏的background的屬性值依次爲：
#FFF 背景色：（顏色值，背景圖片沒有覆蓋的地方，或者沒有背景圖片時表現的背景色）
image 背景圖片：（這裏是圖片的地址）
no-repeat 是否重複：（圖片小於容器的大小時，默認會重複排列圖片以填滿容器，no-repeat表示不重複，只有這個時候後面的定位座標纔有用。）
fixed 背景是否隨容器滾動：（有兩個可選值，scroll滾動，fixed不滾動，默認是scroll）
x y 背景圖像的定位：（注意，只有在no-repeat下定位纔有意義。這個就是今天要講的重點）
背景圖像定位中咱們要明確的幾點：

一、兩個值前面一個是橫向的定位，咱們稱爲x軸方向定位。後面一個值是縱向的定位，咱們稱爲y軸方向定位。若是隻有一個值，那默認的就是x軸方向，這時y軸方向就默認的是上下居中對齊，也就是center。
二、座標軸的原點就是對應容器的左頂點。
三、這個座標的y軸箭頭朝下，也就是右下方（容器內部）x y的值才都爲正。
四、x y值分別表示背景圖片的左頂點相對於座標原點（也就是容器的左頂點）的值。
五、x y的值能夠用百分比或者px來表示。
六、x y也能夠用「left、right、top、bottom、center」這五個對齊方式來表示，但注意：用「left、right、top、bottom、center」來表示的時候，應用的 是對齊規則，而不是座標規則。x爲left是表示圖片的左邊和容器的左邊對齊，爲right的時候表示圖片的右邊和容器的右邊對其，y爲top的時候表示 圖片的頂部和容器的頂部對齊，爲bottom時表示圖片的底部和容器的底部對齊，x y等於center的時候表示居中對齊。
七、x y用百分比或者px表示的時候，其值能夠爲負數。咱們應用座標規則就很容易理解負數表示的意義，x爲負數時候表示圖片左頂點在容器左頂點的左側，y爲負數時表示圖片的左頂點在容器的左定點的上方。也就是向左和向上超出容器的範圍。
補充一點，若是定位用的是百分比話，算法比較特殊。我舉個例子：
代碼：

background:#FFF url(image) no-repeat fixed 50% -30%;

這個時候圖片應該在容器的什麼位置呢,算法公式以下： 

圖片左頂點距容器左頂點的座標位置爲 
x：（容器的寬度-圖片的寬度）x50% 
y：（容器的高度-圖片的高度）x（-30%） 
獲得的結果應用座標法則，差值若是爲負數，百分比爲正那麼運算結果是負值。若是差值爲負數，百分比也爲負數，那麼運算結果就是正數。總而言之就是這裏的運算符合運算法則。把運算的結果帶入座標法則就能獲得圖片的位置。 

好比：容器是width：600px；height：600px；而圖片是width：200px；height：200px； 
咱們用上面的樣式，能夠獲得圖片位置爲： 
x：(600px-200px)*50% 
y：(600px-200px)*(-30%) 

View Code

 

推薦工具

CssSprite

licecap126-install