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
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 背景色：（顏色值，背景沒有覆蓋的地方，或者沒有背景時表現的背景色）
image 背景：（這裡是的位址）
no-repeat 是否重複：（小於容器的大小時，缺省會重複排列以填滿容器，no-repeat表示不重複，只有這個時候後面的定位座標才有用。）
fixed 背景是否隨容器滾動：（有兩個可選值，scroll滾動，fixed不滾動，預設是scroll）
x y 背景影象的定位：（注意，只有在no-repeat下定位才有意義。這個就是今天要講的重點）
背景影象定位中我們要明確的幾點：
1、兩個值前面乙個是橫向的定位，我們稱為x軸方向定位。後面乙個值是縱向的定位，我們稱為y軸方向定位。如果只有乙個值，那預設的就是x軸方向，這時y軸方向就預設的是上下居中對齊，也就是center。
2、座標軸的原點就是對應容器的左頂點。
3、這個座標的y軸箭頭朝下，也就是右下方（容器內部）x y的值才都為正。
4、x y值分別表示背景的左頂點相對於座標原點（也就是容器的左頂點）的值。
5、x y的值可以用百分比或者px來表示。
6、x y也可以用「left、right、top、bottom、center」這五個對齊方式來表示，但注意：用「left、right、top、bottom、center」來表示的時候，
應用的是對齊規則，而不是座標規則。x為left是表示的左邊和容器的左邊對齊，為right的時候表示的右邊和容器的右邊對其，y為top的時候表示的頂部和容器的頂部對齊，為bottom時表示的底部和容器的底部對齊，x y等於center的時候表示居中對齊。
7、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%)
CSS Sprite初探之原理 使用
css sprite簡介 利用css sprites能很好地減少了網頁的http請求次數，從而大大的提高了頁面的效能,節省時間和頻寬。css sprites在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會...
css sprite原理優缺點及使用
css sprites在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是差不多的，所以無需 顧忌這個...
關於CSS sprite 的使用心得。
實現 用css的背景樣式 一整張包含很多小元素的實現各種頁面元素。前提 對於一般的asdl國內的寬頻，當小於200kb時，其傳輸速度其實是差不多的。個人覺得 如果是國際網域名稱，就要在不同地區設 否則該方案應該行不通。優點 通過合併多張小，減少頁面中連線的併發數 同一瀏覽器，對於同乙個dn支援的併發...