圖片精靈
圖像精靈是把成單個圖像的圖像的集合。
有許多圖像的網頁可能需要很長的時間來加載，並產生多個服務器的請求。
使用圖片精靈會降低服務器的請求的數量和節省帶寬。
圖片精靈 - 簡單的例子
代替使用三個獨立的圖像，我們使用這種單個圖像("img_navsprites.gif")
使用CSS，我們可以顯示我們所需要的圖像只是一部分。
在下面的例子中的CSS指定哪部分"img_navsprites.gif"圖像顯示：
例子解釋：
-
<img id="home" src="img_trans.gif">-只定義了一個小的透明圖像，因為src屬性不能為空。 顯示的圖像將是我們指定的CSS背景圖像 -
width: 46px; height: 44px;width: 46px; height: 44px;-定義，我們要使用的圖像的部分 -
background: url(img_navsprites.gif) 0 0;-定義背景圖像和它的位置（左0像素，頂部0像素）
這是使用圖像精靈最簡單的方法，現在我們希望通過使用鏈接展開和懸停的效果。
圖片精靈 - 創建一個導航列表
我們要使用的精靈形象("img_navsprites.gif")來創建一個導航列表。
我們將用HTML列表，因為它可以是一個鏈接，同時還支持一個背景圖像：
例
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
試一試» 例子解釋：
- #navlist {position:relative;} -位置被設置為相對於允許它裡面絕對定位
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding設置為0，列表樣式被刪除，所有列表項都是絕對定位
- #navlist li, #navlist a {height:44px;display:block;} -所有圖像的高度是44px
現在就開始為每個特定部分的位置和風格：
- #home {left:0px;width:46px;} -定位一路向左，並且圖像的寬度是46px
- #home {background:url(img_navsprites.gif) 0 0;} -定義背景圖像和它的位置（左0像素，頂部0像素）
- #prev {left:63px;width:43px;} -定位63px向右（#home寬度46px +件之間的一些額外的空間），並且寬度為43px。
- #prev {background:url('img_navsprites.gif') -47px 0;} -定義背景圖片47px到右側（#home寬度46px + 1px的分隔線）
- #next {left:129px;width:43px;} -定位129px向右（#prev開始為63px + #prev寬度43px +額外的空間），寬度為43px。
- #next {background:url('img_navsprites.gif') -91px 0;} -定義背景圖片91px到右側（#home寬度46px + 1px的分隔線+ #prev寬度43px + 1px的分隔線）
圖片精靈 - 懸停效果
現在，我們要懸停效果添加到我們的導航列表。
 | 提示： :hover選擇器可以在所有元素中使用，不僅對鏈接。 |
|---|
我們的新形象("img_navsprites_hover.gif")包含三個導航圖像和三幅圖像用於懸停效果：
因為這是一個單一的圖像，而不是六個獨立的文件中，當用戶將鼠標懸停在圖像上就不會有延遲加載 。
我們只添加三行代碼添加懸停效果：
例
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
} 試一試» 例子解釋：
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} -對於所有三個懸停圖片我們指定了相同的背景位置，只×45像素再向下