只使用一張CSS Sprites圖片，製作導航選單背景，滑鼠懸浮高亮（其實就是切換背景圖）。

由於各瀏覽器目前對“background-position-x”這種“不規範”的css屬性支援程度不一，於是派生出多種實現方案。

方案一：

<style type="text/css">
a {
	float: left;
	width: 80px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background-repeat: no-repeat;
}
/* 常態 單背景x座標各自設定 */
.h {
	background-position-x: 0;
}
.x {
	background-position-x: -80px;
}
.b {
	background-position-x: -160px;
}
/* 單背景圖統一設定 */
/* 常態 單背景y座標統一設定 */
a {
	background-image: url("http://w3school.com.cn/i/site_bg.gif");
	background-position-y: 0;
}
/* 高亮 單背景y座標統一設定 */
a:hover {
	background-position-y: -40px;
}
</style>
<h1>使用單背景圖，背景圖x,y座標分開設定</h1>
<p>不支援Firfox、Opera。可統一設定某一座標，座標變化時易於維護</p>
<p>有n個元素項時，所需樣式規則數一般為：n + 2</p>
<a class="h" href="http://w3school.com.cn/h.asp" target="w3school.com.cn">HTML</a>
<a class="x" href="http://w3school.com.cn/x.asp" target="w3school.com.cn">XML</a>
<a class="b" href="http://w3school.com.cn/b.asp" target="w3school.com.cn">Browser Scripting</a>
 

<style type="text/css">
a {
	float: left;
	width: 80px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background-repeat: no-repeat;
}
/* 單背景圖統一設定 */
a {
	background-image: url("http://w3school.com.cn/i/site_bg.gif");
}
/* 常態 單背景全部座標各自設定 */
.h {
	background-position: 0 0;
}
.x {
	background-position: -80px 0;
}
.b {
	background-position: -160px 0;
}
/* 高亮 單背景全部座標各自設定 */
.h:hover {
	background-position: 0 -40px;
}
.x:hover {
	background-position: -80px -40px;
}
.b:hover {
	background-position: -160px -40px;
}
</style>
<h1>使用單背景圖，背景圖x,y座標同時設定</h1>
<p>全瀏覽器相容。無法統一設定某一座標，座標變化時不便維護</p>
<p>有n個元素項時，所需樣式規則數一般為：n * 2</p>
<a class="h" href="http://w3school.com.cn/h.asp" target="w3school.com.cn">HTML</a>
<a class="x" href="http://w3school.com.cn/x.asp" target="w3school.com.cn">XML</a>
<a class="b" href="http://w3school.com.cn/b.asp" target="w3school.com.cn">Browser Scripting</a>
 

<style type="text/css">
a {
	float: left;
	width: 80px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background-repeat: no-repeat;
}
/* 常態 多背景全部座標各自設定 */
.h {
	background-position: 0 0, 0 -40px;
}
.x {
	background-position: -80px 0, -80px -40px;
}
.b {
	background-position: -160px 0, -160px -40px;
}
/* 常態 多背景只顯示第一背景 */
a {
	background-image: url("http://w3school.com.cn/i/site_bg.gif"), none;
}
/* 高亮 多背景只顯示第二背景 */
a:hover {
	background-image: none, url("http://w3school.com.cn/i/site_bg.gif");
}
</style>
<h1>使用CSS3多背景圖</h1>
<p>不相容IE8及更早版本。可統一切換要顯示的背景圖，但寫法繁瑣，座標變化時不便維護</p>
<p>有n個元素項時，所需樣式規則數一般為：n + 2</p>
<a class="h" href="http://w3school.com.cn/h.asp" target="w3school.com.cn">HTML</a>
<a class="x" href="http://w3school.com.cn/x.asp" target="w3school.com.cn">XML</a>
<a class="b" href="http://w3school.com.cn/b.asp" target="w3school.com.cn">Browser Scripting</a>
 

<style type="text/css">
a {
	float: left;
	width: 80px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
	background-repeat: no-repeat;
}
/* 常態 單背景x座標各自設定 */
/* 常態 多背景全部座標各自設定 */
.h {
	background-position-x: 0;
	background-position: 0 0, 0 -40px;
}
.x {
	background-position-x: -80px;
	background-position: -80px 0, -80px -40px;
}
.b {
	background-position-x: -160px;
	background-position: -160px 0, -160px -40px;
}
/* 單背景圖統一設定 */
/* 常態 單背景y座標統一設定 */
/* 常態 多背景只顯示第一背景 */
a {
	background-image: url("http://w3school.com.cn/i/site_bg.gif");
	background-position-y: 0;
	background-image: url("http://w3school.com.cn/i/site_bg.gif"), none; /* 需寫在單背景圖屬性之後，以免被單背景覆蓋。而不支援多背景的瀏覽器會忽略此屬性 */
}
/* 高亮 單背景y座標統一設定 */
/* 高亮 多背景只顯示第二背景 */
a:hover {
	background-position-y: -40px;
	background-image: none, url("http://w3school.com.cn/i/site_bg.gif");
}
</style>
<h1>結合使用單背景圖和多背景圖</h1>
<p>全瀏覽器相容。看似完美的相容性解決方案，實際上寫法繁瑣，容易出錯</p>
<p>有n個元素項時，所需樣式規則數一般為：n + 2</p>
<a class="h" href="http://w3school.com.cn/h.asp" target="w3school.com.cn">HTML</a>
<a class="x" href="http://w3school.com.cn/x.asp" target="w3school.com.cn">XML</a>
<a class="b" href="http://w3school.com.cn/b.asp" target="w3school.com.cn">Browser Scripting</a>

<style type="text/css">
a {
	position: relative;
	float: left;
	width: 80px;
	height: 40px;
	text-indent: -9999px;
	overflow: hidden;
}
/* 單背景圖統一設定 */
a span {
	position: absolute;
	display: block;
	width: 240px;
	height: 80px;
	background-image: url("http://w3school.com.cn/i/site_bg.gif");
	background-repeat: no-repeat;
}
/* 常態 單背景橫座標各自設定 */
.h span {
	left: 0;
}
.x span {
	left: -80px;
}
.b span {
	left: -160px;
}
/* 常態 單背景縱座標統一設定 */
a span {
	top: 0;
}
/* 高亮 單背景縱座標統一設定 */
a:hover span {
	top: -40px;
}
/* 修補IE6/7/Quriks Mode bug */
a:hover {
	cursor: pointer;
}
</style>
<h1>使用內嵌的元素展示背景圖</h1>
<p>全瀏覽器相容。可統一設定某一座標，座標變化時易於維護</p>
<p>有n個元素項時，所需樣式規則數一般為：n + 2</p>
<a class="h" href="http://w3school.com.cn/h.asp" target="w3school.com.cn"><span>HTML</span></a>
<a class="x" href="http://w3school.com.cn/x.asp" target="w3school.com.cn"><span>XML</span></a>
<a class="b" href="http://w3school.com.cn/b.asp" target="w3school.com.cn"><span>Browser Scripting</span></a>

使用至少兩張CSS Sprites圖片，座標一次定型，常態和高亮狀態分別使用不同的圖片。

此方案唯一的缺點就是要多出一張圖片。

程式碼略。

測試環境：

Windows XP

IE 6~8

Firefox 3.6

Firefox 10.0.2

Chrome 17

Safari 5.1

Opera 11.61