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 列表，因为它可以作为链接并且还支持背景图像：
例子
#导航列表 {
位置：相对；
}
#导航列表 li {
边距：0；
填充：0；
列表样式：无；
位置：绝对；
顶部：0；
}
#navlist li，#navlist a {
高度：44px；
显示：块；
}
＃家 {
左边：0px；
宽度：46px；
背景：url（'img_navsprites.gif'）0 0；
}
#上一页 {
左：63px；
宽度：43px；
背景：url（'img_navsprites.gif'）-47px 0；
}
＃下一个 {
左：129px；
宽度：43px；
背景：url（'img_navsprites.gif'）-91px 0；
}
亲自尝试 »
示例解释：
- #navlist {position:relative;} - 位置设置为相对以允许在其中进行绝对定位
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 边距和填充设置为 0，列表样式被删除，并且所有列表项都绝对定位
- #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”）包含三个导航图像和三个用于悬停效果的图像：
因为这是一张单一图像，而不是六个单独的文件，所以会有 无加载延迟 当用户将鼠标悬停在图像上时。
我们仅添加三行代码即可添加悬停效果：
例子
#主页 a:悬停{
背景：url（'img_navsprites_hover.gif'）0 -45px；
}
#上一个：悬停{
背景：url（'img_navsprites_hover.gif'）-47px -45px；
}
#下一个：悬停{
背景：url（'img_navsprites_hover.gif'）-91px -45px；
}
亲自尝试 »
示例解释：
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，仅向下 45px
