圖像精靈（Image Sprites）
圖像精靈是放入一張單獨的圖片中的一系列圖像。
包含大量圖像的網頁需要更長時間來下載，同時會生成多個服務器請求。
使用圖像精靈將減少服務器請求數量並節約帶寬。
圖像精靈 - 簡單的例子
我們使用這幅單獨的圖像 ("img_navsprites.gif")，而不是三幅獨立的圖像：
通過 CSS，能夠只顯示我們需要的圖像部分。
在下面的例子中，CSS 規定要顯示 "img_navsprites.gif" 圖像的哪個部分：
實例
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
例子解釋：
因為 src 屬性不能為空，所有我們定義了一幅小的透明圖像。而顯示的圖像將是我們在 CSS 中規定的背景圖像：
<img class="home" src="img_trans.gif" />
定義我們希望使用的圖像部分：
width:46px; height:44px;
定義背景圖像及其位置 (left 0px, top 0px)：
background:url(img_navsprites.gif) 0 0;
這是使用圖像精靈的最簡單的方法，現在我們希望通過鏈接和 hover 效果來擴展它。
圖像精靈 - 創建導航列表
我們希望使用圖像精靈 ("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;}
#home {background:url('img_navsprites.gif') 0 0;}
#prev {left:63px;width:43px;}
#prev {background:url('img_navsprites.gif') -47px 0;}
#next {left:129px;width:43px;}
#next {background:url('img_navsprites.gif') -91px 0;}
例子解釋：
把 position 設置為 relative 允許其中進行絕對定位：
#navlist {position:relative;}
外邊距和內邊距被設置為 0，去掉 list-style，並且所有列表項均為絕對定位：
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
所有圖像的高度是 44px：
#navlist li, #navlist a {height:44px;display:block;}
現在開始定位並添加每個具體部分的樣式：
定位到最左側，圖像寬度為 46px：
#home {left:0px;width:46px;}
定義背景圖像及其位置 (left 0px, top 0px)：
#home {background:url(img_navsprites.gif) 0 0;}
向右定位 63px (#home 寬度 46px + 項目之間的間隔)，寬度是 43px：
#prev {left:63px;width:43px;}
定義背景圖像向右移動 47px (#home 的寬度是 46px + 1px 的分隔線)：
#prev {background:url('img_navsprites.gif') -47px 0;}
向右定位至 129px (從 #prev 的 63px 開始 + #prev 寬度 43px + extra space)，寬度是 43px：
#next {left:129px;width:43px;}
定義背景圖像向右 91px (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )：
#next {background:url('img_navsprites.gif') no-repeat -91px 0;}
圖像精靈 - Hover 效果
現在，我們希望向導航列表添加 hover 效果。
提示：:hover 選擇器用於在鼠標指針位於其上時選取元素。
提示：:hover 選擇器可用在所有元素上，不僅僅是鏈接。
我們的新圖像 ("img_navsprites_hover.gif") 包含三幅導航圖像，以及三幅用於 hover 效果的圖像：
由於這是一幅單獨的圖像，而不是六個獨立的文件，當用戶將鼠標指針移動到圖像上時，不會產生加載延遲。
為了添加 hover 效果，我們只加入了三行代碼：
實例
#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;}
例子解釋：
對於所有三幅 hover 圖像，我們規定了相同的背景位置，只是向下移動 45px：
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;}