1. 什么是CSS Sprites?
CSS Sprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位。
舉個栗子:
emoji.jpg
變成:
emoji-2.png
2. CSS Sprites的優缺點
2.1 優點
- 很好地減少網頁的http請求，從而大大的提高頁面的性能。
- 減少圖片的字節, 多張圖片合并成1張圖片的字節總是小于多張圖片的字節總和。
- 解決了在圖片命名上的困擾。
2.2 缺點
- 把多張圖片有序的合理的合并成一張圖片,還要留好足夠的空間, 防止板塊內出現不必要的背景；
- 在寬屏，高分辨率的屏幕下的自適應頁面，如果圖片不夠寬，很容易出現背景斷裂；
- 因為要測量計算每一個背景單元的精確位置，建議使用CSS Sprites 樣式生成工具。
- CSS Sprites在維護時，如果頁面背景有少許改動，一般就要改這張合并的圖片。
總結：一般CSS Sprites拼合布局用于局部小盒子布局不適合大背景大布局背景使用。比如小局部布局小圖標背景、小導航背景等CSS布局。總之很多時候需要權衡利弊，再決定是不是應用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 的兩個參數: 第一個值是水平位置，第二個值是垂直位置。左上角的為 0 0. 具體參照W3School
如果覺得我寫的還不錯,請踩踩demos,這是一些常用效果的合集.持續更新ing.
