CSS 影像精靈
影像精靈
影像精靈是將多個影像合併到一個影像中。
載入許多影像的網頁可能需要很長時間，並會生成多個伺服器請求。
使用影像精靈將減少伺服器請求的數量並節省頻寬。
影像精靈 - 簡單示例
我們使用此單個影像（“img_navsprites.gif”）而不是三個單獨的影像
使用 CSS，我們可以顯示我們需要的影像部分。
在以下示例中，CSS 指定了要顯示的“img_navsprites.gif”影像的哪個部分
示例說明
<img id="home" src="img_trans.gif">- 僅定義一個小的透明影像，因為 src 屬性不能為空。顯示的影像將是我們 CSS 中指定的背景影像width: 46px; height: 44px;- 定義我們要使用的影像部分background: url(img_navsprites.gif) 0 0;- 定義背景影像及其位置（左 0px，上 0px）
這是使用影像精靈最簡單的方法，現在我們要透過使用連結和懸停效果來擴充套件它。
影像精靈 - 建立導航列表
我們將使用精靈影像（“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;}- position 設定為 relative，以便在其內部進行絕對定位#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}- margin 和 padding 設定為 0，移除了 list-style，並且所有列表項都設定為絕對定位#navlist li, #navlist a {height:44px;display:block;}- 所有影像的高度為 44px
現在開始為每個特定部分定位和樣式化
#home {left:0px;width:46px;}- 定位在最左邊，影像寬度為 46px#home {background:url(img_navsprites.gif) 0 0;}- 定義背景影像及其位置（左 0px，上 0px）#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: url('img_navsprites_hover.gif') 0 -45px;}- 對於所有三個懸停影像，我們指定相同的背景位置，僅向下移動 45px
