什么是css sprite?原理優(yōu)缺點(diǎn)及使用實(shí)例

關(guān)于CSS Sprite

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

　　加速的關(guān)鍵，不是降低重量，而是減少個(gè)數(shù)。傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小無所謂，計(jì)算機(jī)統(tǒng)一都按byte計(jì)算。客戶端每顯示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求，所以，圖片越多請(qǐng)求次數(shù)越多，造成延遲的可能性也就越大。

CSS Sprites原理

　　CSS Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。

CSS Sprites優(yōu)點(diǎn)

　　利用CSS Sprites能很好地減少了網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高了頁(yè)面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；
　　CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。

CSS Sprites缺點(diǎn)

　　誠(chéng)然CSS Sprites是如此的強(qiáng)大，但是也存在一些不可忽視的缺點(diǎn)
　　在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)不會(huì)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁(yè)面，你的圖片如果不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂；
　　CSS Sprites在開發(fā)的時(shí)候比較麻煩，你要通過photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用RIA開發(fā)了一個(gè)CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經(jīng)比photoshop測(cè)量來的方便多了，而且樣式直接生成，復(fù)制，拷貝就OK！

　　CSS Sprites在維護(hù)的時(shí)候比較麻煩，如果頁(yè)面背景有少許改動(dòng)，一般就要改這張合并的圖片，無需改的地方最好不要?jiǎng)?，這樣避免改動(dòng)更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動(dòng)css。

　　CSS Sprites非常值得學(xué)習(xí)和應(yīng)用，特別是頁(yè)面有一堆ico（圖標(biāo)）。總之很多時(shí)候大家要權(quán)衡一下利弊，再?zèng)Q定是不是應(yīng)用CSS Sprites。

CSS Sprite的使用

　　有幾篇關(guān)于CSS Sprites的文章，基本上把其原理和機(jī)制說明得很清楚。
　　What Are CSS Sprites?
　　How to create CSS sprites
　　Creating Rollover Effects with CSS Sprites
　　Building a Dynamic Banner with CSS Sprites
　　High Performance Web Sites中關(guān)于CSS Sprites的內(nèi)容3.2. CSS Sprites

CSS Sprite的例子

　　1. 圖片限制(Image Slicing)[1]
　　典型如文本編輯器，小圖標(biāo)特別多，打開時(shí)一張張跑出來，給用戶的感覺很不好。如果能用一張圖解決，則不會(huì)有這個(gè)問題，比如百度空間、163博客、Gmail都是這么做的。
　　Image Slicing’s Kiss of Death
　　http://www.alistapart.com/articles/sprites
　　2. 單圖轉(zhuǎn)滾(Single-image Rollovers)[1]
　　觸發(fā)切換圖片的需求，傳統(tǒng)方案得重新請(qǐng)求新圖片，因?yàn)榫W(wǎng)絡(luò)問題經(jīng)常造成停留或等待。如果能把多種狀態(tài)合并成一張圖，就能完美解決，然后再使用背景圖技術(shù)模擬動(dòng)態(tài)效果。
　　ColorScheme Ratings
　　http://demo.rexsong.com/200608/colorscheme_ratings/
　　3. 延長(zhǎng)背景(Extend Background Image)[1]
　　如果圖片的某邊可以背景平鋪無限延長(zhǎng)，則不需要每個(gè)角、每條邊單獨(dú)搞出來，圖片能少一個(gè)就少一個(gè)。其實(shí)，這個(gè)理論還可以擴(kuò)展到四角容器里，好處是能大大簡(jiǎn)化HTML Structure。
　　Extend Background Image
　　http://demo.rexsong.com/200705/extend_background_image/
　　綜合案例
　　Google Korea（1和2技巧）
　　http://demo.rexsong.com/200705/google_korea/
　　CSS Menus（2和3技巧）
　　http://demo.rexsong.com/200705/css_background_menus/

CSS Sprites的問題

　　由于IE6存在的background的flicker問題IE6/Win, background image on , cache=‘check every visit’: flicker!，有人針對(duì)此問題提出了解決方案Fast Rollovers Without Preload
　　關(guān)于IE6的flicker問題，fivesevensix.com上有一篇很不錯(cuò)的研究文章Minimize Flickering CSS Background Images in IE6
　　另外：brunildo.org的CSS tests and experiments是關(guān)于css各種功能不錯(cuò)的參考手冊(cè)和測(cè)試工具。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)