CSS Sprites製作導航懸浮高亮各方案比較

只使用一張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