什么是CSS Sprites?
CSS Sprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中， 利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位， 訪問頁面時避免圖片載入緩慢的現象。
優點:
（1）CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
（2）CSS Sprites能減少圖片的字節；
（3）CSS Sprites解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片命名，不需要對每一個小圖片進行命名，從而提高了網頁制作效率。
（4）CSS Sprites只需要修改一張或少張圖片的顏色或樣式來改變整個網頁的風格。
缺點:
（1）圖片合并麻煩：圖片合并時，需要把多張圖片有序的合理的合并成一張圖片，并留好足夠的空間防止版塊出現不必要的背景。
（2）圖片適應性差：在高分辨的屏幕下自適應頁面，若圖片不夠寬會出現背景斷裂。
（3）圖片定位繁瑣：開發時需要通過工具測量計算每個背景單元的精確位置。
（4）可維護性差：頁面背景需要少許改動，可能要修改部分或整張已合并的圖片，進而要改動css。在避免改動圖片的前提下，又只能（最好）往下追加圖片，但這樣增加了圖片字節。
<style type="text/css">
div{
width: 500px;
height: 300px;
background: url("nav_bg.png")no-repeat -153px 0px;
}
.div_1{
width: 50px;
height:50px;
}
.div_1:hover{
background-position: -153px -56px;
/*位置只有兩個值 橫向和縱向*/
}
</style>
</head>
<body>
<div class="div_1"></div>
<div class="div_2"></div>
</body>
