什么是CSS Sprites?
CSS Sprites在國內(nèi)很多人叫css精靈雁仲，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中缸兔， 利用CSS的“background-image”，“background- repeat”惰蜜，“background-position”的組合進(jìn)行背景定位受神， 訪問頁面時避免圖片載入緩慢的現(xiàn)象。
優(yōu)點(diǎn):
（1）CSS Sprites能很好地減少網(wǎng)頁的http請求财著，從而大大的提高頁面的性能撑碴，這是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因灰羽；
（2）CSS Sprites能減少圖片的字節(jié)；
（3）CSS Sprites解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾玫镐，只需對一張集合的圖片命名，不需要對每一個小圖片進(jìn)行命名恐似，從而提高了網(wǎng)頁制作效率傍念。
（4）CSS Sprites只需要修改一張或少張圖片的顏色或樣式來改變整個網(wǎng)頁的風(fēng)格葛闷。
缺點(diǎn):
（1）圖片合并麻煩：圖片合并時淑趾，需要把多張圖片有序的合理的合并成一張圖片，并留好足夠的空間防止版塊出現(xiàn)不必要的背景扣泊。
（2）圖片適應(yīng)性差：在高分辨的屏幕下自適應(yīng)頁面嘶摊，若圖片不夠?qū)挄霈F(xiàn)背景斷裂。
（3）圖片定位繁瑣：開發(fā)時需要通過工具測量計算每個背景單元的精確位置阱飘。
（4）可維護(hù)性差：頁面背景需要少許改動，可能要修改部分或整張已合并的圖片虱颗，進(jìn)而要改動css。在避免改動圖片的前提下咐熙，又只能（最好）往下追加圖片辨萍，但這樣增加了圖片字節(jié)。
<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>
