站長(zhǎng)資訊網(wǎng)css精靈是一種處理網(wǎng)頁(yè)背景圖像的方式。它其實(shí)就是把一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁(yè)；這樣一來(lái)，用戶訪問(wèn)該頁(yè)面時(shí)，只需向服務(wù)發(fā)送一次請(qǐng)求，網(wǎng)頁(yè)中的背景圖像即可全部展示出來(lái)。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
什么是css精靈（sprite）？
“CSS精靈”，也被稱(chēng)為通常被解釋為“CSS圖像拼合”、“CSS貼圖定位”或“CSS圖片精靈”、“CSS雪碧圖”，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。其實(shí)就是把一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來(lái)，當(dāng)訪問(wèn)該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。
當(dāng)用戶訪問(wèn)該頁(yè)面時(shí)，只需向服務(wù)發(fā)送一次請(qǐng)求，網(wǎng)頁(yè)中的背景圖像即可全部展示出來(lái)。
例如：
優(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)比較過(guò)多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
-
解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁(yè)的制作效率。
-
更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起來(lái)更加方便。
精靈技術(shù)的使用
css精靈圖（sprite）其實(shí)就是通過(guò)將多個(gè)圖片融合到一張圖里面，然后通過(guò)CSS background背景定位技術(shù)技巧布局網(wǎng)頁(yè)背景。在需要用到圖片的時(shí)候，現(xiàn)階段是通過(guò)CSS屬性background-image組合background-repeat, background-position等來(lái)實(shí)現(xiàn)圖片的顯示。
示例：
精靈圖分析：
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{ margin: 0; padding: 0; } .sprites{ width: 200px; margin: 50px auto; } .sprites div{ margin: 5px; } .sprites span{ float: left; width: 20px; height:20px; background: url('./images/icon.png');/* 引用精靈圖 */ background-size: 60px 40px; } .sprites1{ background-position: 0 0; } .sprites2{ background-position: -20px 0 !important; } .sprites3{ background-position: 0 -20px !important; } .sprites4{ background-position: -20px -20px !important; } .sprites5{ background-position: -40px 0 !important; } </style> </head> <body> <div class="sprites"> <div><span class="sprites1"></span>付款圖標(biāo)</div> <div><span class="sprites2"></span>存款圖標(biāo)</div> <div><span class="sprites3"></span>刪除圖標(biāo)</div> <div><span class="sprites4"></span>粘貼圖標(biāo)</div> <div><span class="sprites5"></span>笑臉圖標(biāo)</div> </div> </body> </html>
學(xué)習(xí)視頻分享：css視頻教程
