CSSSprites(CSS精靈)

　　一般css精靈，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位。

二.使用CSS Sprites的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

1.很好地減少網(wǎng)頁的http請(qǐng)求，從而大大的提高頁面的性能。

2.減少圖片的字節(jié)，多張圖片合并成1張圖片的字節(jié)總是小于多張圖片的字節(jié)總和。

3.解決了在圖片命名上的困擾。

缺點(diǎn)：

1.在圖片合并的時(shí)候，要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；

2.在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，如果圖片不夠?qū)?，很容易出現(xiàn)背景斷裂；

3..CSS Sprites在開發(fā)時(shí)，要測(cè)量計(jì)算每一個(gè)背景單元的精確位置，建議使用CSS Sprites 樣式生成工具。

4.CSS Sprites在維護(hù)時(shí)，如果頁面背景有少許改動(dòng)，一般就要改這張合并的圖片。

總結(jié)：一般CSS Sprites拼合布局用于局部小盒子布局不適合大背景大布局背景使用。比如小局部布局小圖標(biāo)背景、小導(dǎo)航背景等CSS布局?？傊芏鄷r(shí)候大家要權(quán)衡一下利弊，再?zèng)Q定是不是應(yīng)用CSS Sprites。

三.舉個(gè)栗子

一張Emoji的圖片

最終效果：

html代碼：

css代碼：

*{
 margin: 0px;
 }
 ul,li{
 list-style: none;
 }
 li{
 width:50px;
 height:50px;
 overflow: hidden;
 background: url('Emoji.jpg') -0px -0px no-repeat;
 }
 .Emoji1{
 background-position: -0px -0px;
 }
 .Emoji2{
 background-position: -0px -50px;
 }
 .Emoji3{
 background-position: -0px -100px;
 }
 .Emoji4{
 background-position: -0px -150px;
 }

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com