1. 什么是CSS Sprites?

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

舉個(gè)栗子:

emoji.jpg

變成:

emoji-2.png

2. CSS Sprites的優(yōu)缺點(diǎn)

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

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

• 減少圖片的字節(jié), 多張圖片合并成1張圖片的字節(jié)總是小于多張圖片的字節(jié)總和。
• 解決了在圖片命名上的困擾。

2.2 缺點(diǎn)

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

• 在寬屏，高分辨率的屏幕下的自適應(yīng)頁(yè)面，如果圖片不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂；
• 因?yàn)橐獪y(cè)量計(jì)算每一個(gè)背景單元的精確位置，建議使用CSS Sprites 樣式生成工具。
• CSS Sprites在維護(hù)時(shí)，如果頁(yè)面背景有少許改動(dòng)，一般就要改這張合并的圖片。

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

3. 上圖例子的代碼

HTML代碼:

<ul>    
    <li class="Emoji1"></li>    
    <li class="Emoji2"></li>    
    <li class="Emoji3"></li>    
    <li class="Emoji4"></li>
</ul>

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;}

background-position 的兩個(gè)參數(shù): 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角的為 0 0. 具體參照W3School

如果覺得我寫的還不錯(cuò),請(qǐng)踩踩demos,這是一些常用效果的合集.持續(xù)更新ing.