图片精灵
图像精灵是把成单个图像的图像的集合。
有许多图像的网页可能需要很长的时间来加载，并产生多个服务器的请求。
使用图片精灵会降低服务器的请求的数量和节省带宽。
图片精灵 - 简单的例子
代替使用三个独立的图像，我们使用这种单个图像("img_navsprites.gif")
使用CSS，我们可以显示我们所需要的图像只是一部分。
在下面的例子中的CSS指定哪部分"img_navsprites.gif"图像显示：
例子解释：
-
<img id="home" src="img_trans.gif">-只定义了一个小的透明图像，因为src属性不能为空。 显示的图像将是我们指定的CSS背景图像 -
width: 46px; height: 44px;width: 46px; height: 44px;-定义，我们要使用的图像的部分 -
background: url(img_navsprites.gif) 0 0;-定义背景图像和它的位置（左0像素，顶部0像素）
这是使用图像精灵最简单的方法，现在我们希望通过使用链接展开和悬停的效果。
图片精灵 - 创建一个导航列表
我们要使用的精灵形象("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;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
试一试» 例子解释：
- #navlist {position:relative;} -位置被设置为相对于允许它里面绝对定位
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项都是绝对定位
- #navlist li, #navlist a {height:44px;display:block;} -所有图像的高度是44px
现在就开始为每个特定部分的位置和风格：
- #home {left:0px;width:46px;} -定位一路向左，并且图像的宽度是46px
- #home {background:url(img_navsprites.gif) 0 0;} -定义背景图像和它的位置（左0像素，顶部0像素）
- #prev {left:63px;width:43px;} -定位63px向右（#home宽度46px +件之间的一些额外的空间），并且宽度为43px。
- #prev {background:url('img_navsprites.gif') -47px 0;} -定义背景图片47px到右侧（#home宽度46px + 1px的分隔线）
- #next {left:129px;width:43px;} -定位129px向右（#prev开始为63px + #prev宽度43px +额外的空间），宽度为43px。
- #next {background:url('img_navsprites.gif') -91px 0;} -定义背景图片91px到右侧（#home宽度46px + 1px的分隔线+ #prev宽度43px + 1px的分隔线）
图片精灵 - 悬停效果
现在，我们要悬停效果添加到我们的导航列表。
 | 提示： :hover选择器可以在所有元素中使用，不仅对链接。 |
|---|
我们的新形象("img_navsprites_hover.gif")包含三个导航图像和三幅图像用于悬停效果：
因为这是一个单一的图像，而不是六个独立的文件中，当用户将鼠标悬停在图像上就不会有延迟加载 。
我们只添加三行代码添加悬停效果：
例
#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;
} 试一试» 例子解释：
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} -对于所有三个悬停图片我们指定了相同的背景位置，只×45像素再向下