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