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;}- 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;}- 定义背景图片及其位置（左侧 0px，顶部 0px）
• #prev {left:63px;width:43px;}- 位于右侧 63px（#home 宽度 46px + 项目之间的一些额外空间），宽度为 43px
• #prev {background:url('img_navsprites.gif') -47px 0;}- 定义背景图片向右 47 像素（#home 宽度 46 像素 + 1 像素分隔线）
• #next {left:129px;width:43px;}- 位于右侧 129px（#prev 的开头为 63px + #prev 宽度 43px + 额外空间），宽度为 43px
• #next {background:url('img_navsprites.gif') -91px 0;}- 定义背景图片向右 91 像素（#home 宽度 46 像素 + 1 像素分隔线 + #prev 宽度 43 像素 + 1 像素分隔线）

图片精灵 - 悬停效果

现在我们要向导航列表添加悬停效果。

我们的新图片 ("img_navsprites_hover.gif") 包含三个导航图片和三个用于悬停效果的图片：

因为这是一个图片，而不是六个单独的文件，所以将会有无加载延迟当用户将鼠标悬停在图片上时。

我们只添加三行代码来添加悬停效果：

示例解释：

• #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}- 对于所有三个悬停图片，我们指定相同的背景位置，仅向下 45px