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 sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加，這樣的位元組就增加了，還要改動css。
css sprites非常值得學習和應用，特別是頁面有一堆ico（圖示）。總之很多時候大家要權衡一下利弊，再決定是不是應用css sprites。
css sprite的使用
有幾篇關於css sprites的文章，基本上把其原理和機制說明得很清楚。
what are css sprites?
how to create css sprites
creating rollover effects with css sprites
building a dynamic banner with cwww.cppcns.comss sprites
high performance web sites中關於css sprites的內容3.2. css sprites
css sprite的例子
1. 限制(image slicing)[1]
典型如文字編輯器，小圖示特別多，開啟時一張張跑出來，給使用者的感覺很不好。如果能用一張**決，則不會有這個問題，比如百度空間、163部落格、gmail都是這麼做的。
image slicing』s kiss of death
2. 單圖轉滾(single-image rollovers)[1]
觸發切換的需求，傳統方案得重新請求新，因為網路問題經常造成停留或等待。如果能把多種狀態合併成一張圖，就能完美解決，然後再使用背景圖技術模擬動態效果。
colorscheme ratings
3. 延長背景(extend background image)[1]
如果的某邊可以背景平鋪無限延長，則不需要每個角、每條邊單獨搞出來，能少乙個就少乙個。其實，這個理論還可以擴充套件到四角容器裡，好處是能大大簡化html structure。
extend background image
綜合案例
google korea（1和2技巧）
css menus（2和3技巧）
css sprites的問題
由於ie6存在的background的flicker問題ie6/win, background image on , cache=『check every visit』: flicker!，有人針對此問題提出了解決方案fast rollovers without preload
關於ie6的flicker問題，fivesevensix.com上有一篇很不錯的研究文章minimize flickering css background images in ie6
另外：brunildo.org的css tests and experiments是關於css各種功能程式設計客棧不錯的參考手冊和測試工具。
優化1. 對於非動畫的gif更建議使用png8因為它同樣能做到一樣的效果，而且能為你節省10%-30%的檔案體積。
2. photoshop相比起fireworks，匯出同等質量的png，體積會稍大。而fireworks雖然做了相應壓縮優化，但沒有達到最優秀的壓縮。
3. 我所知的設計軟體，對於png的處理都沒做到最優秀的壓縮，體積還有一定的壓縮空間。可以嘗試使用下面介紹的」影象優化工具」 做無失真的壓縮優化。
4. 體積及尺寸方面，建議體積保持在100k以內(較為符合國情最佳請求size)，size為800px(最佳尺寸)。(從某權威人事中得知，具體無從考證)
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時，適當地把對gqhoyzhdu等相同的影象合併，以節省空間及減少體積。
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更小呢? 因為使用這些的元素通常都會有大量的內容而且可能會需要擴www.cppcns.com展的間距，以至於其它不會意外出現。
這個我支援，必竟多空點，也佔不不了多大空間，如何要追求完美，那就慢慢調吧。費了勁了。在加上瀏覽器相容問題，最好還大多空間。小誤差也忽略了。
本文標題: css sprite原理優缺點及使用示例介紹
本文位址:
css sprite原理優缺點及使用
css sprites在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是差不多的，所以無需 顧忌這個...
CDN的原理及優缺點
cdn的全稱是content delivery network，即內容分發網路。其目的是通過在現有的internet中增加一層新的cache 快取 層，將 的內容發布到最接近使用者的網路 邊緣 的節點，使使用者可以就近取得所需的內容，提高使用者訪問 的響應速度。從技術上全面解決由於網路頻寬小 使用者...
POW共識機制原理及優缺點
pow工作量證明 英文全稱為proof of work 在位元幣之前就已經出現，中本聰在設計區塊鏈的共識機制的時候就是借鑑了pow工作量證明。常見的是利用hash運算的複雜度進行cpu運算實現工作量確定。工作量證明 proof of work，pow 是一種對應服務與資源濫用 或是阻斷服務攻擊的經濟...