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;} - 外边距和内边距设置为 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 分隔线）

图像精灵 - 悬停效果

现在我们想要为导航列表添加一个悬停效果。

我们的新图片（“img_navsprites_hover.gif”）包含三个导航图片和三个用于悬停效果的图片。

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

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

示例说明

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