CSS 图像精灵

图像精灵

图像精灵是放入单个图像中的图像集合。

包含许多图像的网页可能需要很长时间才能加载和生成 多个服务器请求。

使用图像精灵将减少服务器请求的数量并节省 带宽。

图像精灵 - 简单示例

我们不使用三个单独的图像，而是使用单个图像（“img_navsprites.gif”）：

使用 CSS，我们可以只显示我们需要的图像部分。

在以下示例中，CSS 指定“img_navsprites.gif”的哪个部分 图片显示：

#home {  width: 46px;  
  height: 44px;  
  background: url(img_navsprites.gif) 0 0;}

尝试一下 »

示例说明：

• <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;}- 位置设置为“相对”以允许 内部绝对定位
• #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;}- 定义背景 图片右侧 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。