图像精灵（Image Sprites）
图像精灵是放入一张单独的图片中的一系列图像。
包含大量图像的网页需要更长时间来下载，同时会生成多个服务器请求。
使用图像精灵将减少服务器请求数量并节约带宽。
图像精灵 - 简单的例子
我们使用这幅单独的图像 ("img_navsprites.gif")，而不是三幅独立的图像：
通过 CSS，能够只显示我们需要的图像部分。
在下面的例子中，CSS 规定要显示 "img_navsprites.gif" 图像的哪个部分：
实例
img.home
{
46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
例子解释：
因为 src 属性不能为空，所有我们定义了一幅小的透明图像。而显示的图像将是我们在 CSS 中规定的背景图像：
<img class="home" src="img_trans.gif" />
定义我们希望使用的图像部分：
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;46px;}
#home {background:url('img_navsprites.gif') 0 0;}
#prev {left:63px;43px;}
#prev {background:url('img_navsprites.gif') -47px 0;}
#next {left:129px;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;46px;}
定义背景图像及其位置 (left 0px, top 0px)：
#home {background:url(img_navsprites.gif) 0 0;}
向右定位 63px (#home 宽度 46px + 项目之间的间隔)，宽度是 43px：
#prev {left:63px;43px;}
定义背景图像向右移动 47px (#home 的宽度是 46px + 1px 的分隔线)：
#prev {background:url('img_navsprites.gif') -47px 0;}
向右定位至 129px (从 #prev 的 63px 开始 + #prev 宽度 43px + extra space)，宽度是 43px：
#next {left:129px;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;}