CSS 图像精灵


目录

    显示目录


图像精灵

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

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

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


图像精灵 - 简单示例

我们不使用三个单独的图像,而是使用这个单个图像(“img_navsprites.gif”):

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

在以下示例中,CSS 指定“img_navsprites.gif”的哪一部分 要显示的图像:

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>


示例解释:

<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;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</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;}

- 定义背景图像向右 47px(#home 宽度 46px + 1px 线 分隔线)

#next {left:129px;width:43px;}

- 位于右侧 129px(#prev 的开头为 63px + #prev 宽度 43px + 额外空间),宽度为 43px

#next {background:url('img_navsprites.gif') -91px 0;}

- 定义背景图像向右 91 像素(#home 宽度 46 像素 + 1 像素 线条分隔线 + #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;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#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;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>


示例解释:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}

- 对于所有三个悬停图像,我们指定相同的背景位置,仅向下 45px