站長資訊網(wǎng)css精靈是一種處理網(wǎng)頁背景圖像的方式。它其實就是把一個頁面涉及到的所有零星圖片都包含到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁；這樣一來，用戶訪問該頁面時，只需向服務(wù)發(fā)送一次請求，網(wǎng)頁中的背景圖像即可全部展示出來。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
什么是css精靈（sprite）？
“CSS精靈”，也被稱為通常被解釋為“CSS圖像拼合”、“CSS貼圖定位”或“CSS圖片精靈”、“CSS雪碧圖”，是一種網(wǎng)頁圖片應(yīng)用處理方式。其實就是把一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
當(dāng)用戶訪問該頁面時，只需向服務(wù)發(fā)送一次請求，網(wǎng)頁中的背景圖像即可全部展示出來。
例如：
優(yōu)點
-
利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點，也是其被廣泛傳播和應(yīng)用的主要原因；
-
CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
-
解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網(wǎng)頁的制作效率。
-
更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網(wǎng)頁的風(fēng)格就可以改變。維護起來更加方便。
精靈技術(shù)的使用
css精靈圖（sprite）其實就是通過將多個圖片融合到一張圖里面，然后通過CSS background背景定位技術(shù)技巧布局網(wǎng)頁背景。在需要用到圖片的時候，現(xiàn)階段是通過CSS屬性background-image組合background-repeat, background-position等來實現(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視頻教程
