CSS 图像精灵
图像精灵
图像精灵是将多个图像合并到一个图像中。
加载许多图像的网页可能需要很长时间，并会生成多个服务器请求。
使用图像精灵将减少服务器请求的数量并节省带宽。
图像精灵 - 简单示例
我们使用此单个图像（“img_navsprites.gif”）而不是三个单独的图像
使用 CSS，我们可以显示我们需要的图像部分。
在以下示例中，CSS 指定了要显示的“img_navsprites.gif”图像的哪个部分
示例说明
<img id="home" src="img_trans.gif">- 仅定义一个小的透明图像，因为 src 属性不能为空。显示的图像将是我们 CSS 中指定的背景图像width: 46px; height: 44px;- 定义我们要使用的图像部分background: url(img_navsprites.gif) 0 0;- 定义背景图像及其位置（左 0px，上 0px）
这是使用图像精灵最简单的方法，现在我们要通过使用链接和悬停效果来扩展它。
图像精灵 - 创建导航列表
我们将使用精灵图像（“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;}- position 设置为 relative，以便在其内部进行绝对定位#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}- margin 和 padding 设置为 0，移除了 list-style，并且所有列表项都设置为绝对定位#navlist li, #navlist a {height:44px;display:block;}- 所有图像的高度为 44px
现在开始为每个特定部分定位和样式化
#home {left:0px;width:46px;}- 定位在最左边，图像宽度为 46px#home {background:url(img_navsprites.gif) 0 0;}- 定义背景图像及其位置（左 0px，上 0px）#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: url('img_navsprites_hover.gif') 0 -45px;}- 对于所有三个悬停图像，我们指定相同的背景位置，仅向下移动 45px
