1. 什么是CSS Sprites?
CSS Sprites在國內(nèi)很多人叫css精靈晶伦，是一種網(wǎng)頁圖片應(yīng)用處理方式碟狞。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來婚陪，當(dāng)訪問該頁面時篷就，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。再利用CSS的“background-image”近忙，“background- repeat”，“background-position”的組合進行背景定位智润。
舉個栗子:
emoji.jpg
變成:
emoji-2.png
2. CSS Sprites的優(yōu)缺點
2.1 優(yōu)點
- 很好地減少網(wǎng)頁的http請求及舍，從而大大的提高頁面的性能。
- 減少圖片的字節(jié), 多張圖片合并成1張圖片的字節(jié)總是小于多張圖片的字節(jié)總和窟绷。
- 解決了在圖片命名上的困擾锯玛。
2.2 缺點
- 把多張圖片有序的合理的合并成一張圖片,還要留好足夠的空間, 防止板塊內(nèi)出現(xiàn)不必要的背景；
- 在寬屏兼蜈，高分辨率的屏幕下的自適應(yīng)頁面攘残，如果圖片不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂为狸；
- 因為要測量計算每一個背景單元的精確位置歼郭，建議使用CSS Sprites 樣式生成工具。
- CSS Sprites在維護時辐棒，如果頁面背景有少許改動病曾，一般就要改這張合并的圖片牍蜂。
總結(jié)：一般CSS Sprites拼合布局用于局部小盒子布局不適合大背景大布局背景使用。比如小局部布局小圖標(biāo)背景泰涂、小導(dǎo)航背景等CSS布局鲫竞。總之很多時候需要權(quán)衡利弊逼蒙，再決定是不是應(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 的兩個參數(shù): 第一個值是水平位置，第二個值是垂直位置是牢。左上角的為 0 0. 具體參照W3School
如果覺得我寫的還不錯,請踩踩demos,這是一些常用效果的合集.持續(xù)更新ing.
