CSS 图像精灵

图像精灵

图像精灵是单个图像中包含的图像集合。

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

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

图像精灵 - 简单的例子

我们使用以下单幅图像("navsprites.gif")而不是使用三幅单独的图像:

导航图像

通过使用 CSS,我们可以仅显示所需图像的某个部分。

在下面的例子中,CSS 指定了显示 "navsprites.gif" 图像的哪部分:

实例

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

亲自试一试

例子解释:

  • <img id="home" src="trans.gif"> - 仅定义小的透明图像,因为 src 属性不能为空。而实际显示的图像将是我们在 CSS 中指定的背景图像。
  • width: 46px; height: 44px; - 定义我们要使用的图像部分
  • background: url(navsprites.gif) 0 0; - 定义背景图片及其位置(left 0px, top 0px)

图像精灵 - 创建导航列表

我们希望使用精灵图片("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;} - 外边距和内边距设置为 0,删除 list-style,并且所有列表项都均为绝对定位
  • #navlist li, #navlist a {height:44px;display:block;} - 所有图片的高度均为 44px

现在开始为每个特定部分设置定位和样式:

  • #home {left:0px;width:46px;} - 一直向左定位,图像宽度 46px
  • #home {background:url(navsprites.gif) 0 0;} - 定义背景图片及其位置(left 0px, top 0px)
  • #prev {left:63px;width:43px;} - 向右定位 63px(#home 宽度 46px + 项目之间的一些额外空间),宽度 43px。
  • #prev {background:url('navsprites.gif') -47px 0;} - 定义背景图片向右 47px(#home 宽度 46px + 1px 分隔线)
  • #next {left:129px;width:43px;} - 向右定位 129px(#prev 开始是 63px + #prev 的宽度是 43px + 多余的空格),宽度 43px。
  • #next {background:url('navsprites.gif') -91px 0;} - 定义背景图片向右 91px(#home 宽度 46px + 1px 分隔线+ #prev 宽度 43px + 1px 分隔线)

图像精灵 - 悬停效果

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

提示::hover 选择器可用于所有元素,而不仅限于链接。

我们的新图像("navsprites_hover.gif")包含三幅导航图像和三幅用于悬停效果的图像:

导航图像

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

我们仅添加三行代码来实现悬停效果:

实例

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

#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

亲自试一试

例子解释:

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

CSS 基础教程

CSS 中级教程

CSS3 高级教程

CSS 响应式设计

CSS 网格教程

CSS 实例

CSS 测验

CSS 参考手册

目录