CSS Sprites原理：
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。
CSS Sprites優缺點：
優點
1.利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2.CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合並成1張圖片的字節總是小於這3張圖片的字節總和。
3.解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
4.更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
缺點
誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點，如下：
1.在圖片合並的時候，你要把多張圖片有序的合理的合並成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
2.CSS Sprites在開發的時候比較麻煩，你要通過pohtoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用ADOBE AIR開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，復制，拷貝就OK！
3.CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合並的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動css。
4.CSS Sprites非常值得學習和應用，特別是頁面有一堆icon（圖標）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/>
<style>
.sprites div {
margin: 5px;
}
.sprites span {
float: left;
width: 20px;
height: 20px;
background-image: url(sprite.png);
background-size: 60px 40px;
}
.sprites1{
background-position: 0 0;
}
.sprites2{
background-position: -20px 0;
}
.sprites3{
background-position: 0 -20px;
}
.sprites4{
background-position: -20px -20px;
}
.sprites5{
background-position: -40px 0;
}
.sprites6{
background-position: -40px -20px;
}
</style>
</head>
<body>
<div class="sprites">
<div><span class="sprites1"></span>付款圖標</div>
<div><span class="sprites2"></span>刪除圖標</div>
<div><span class="sprites3"></span>存款圖標</div>
<div><span class="sprites4"></span>粘貼圖標</div>
<div><span class="sprites5"></span>笑臉圖標</div>
<div><span class="sprites6"></span>編輯圖標</div>
</div>
</body>
</html>
