CSS 图像拼合技术


图像拼合

图像拼合就是单个图像的集合。

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

使用图像拼合会降低服务器的请求数量,并节省带宽。


图像拼合 - 简单实例

与其使用三个独立的图像,不如我们使用这种单个图像("img_navsprites.gif"):

navigation images

有了CSS,我们可以只显示我们需要的图像的一部分。

在下面的例子CSS指定显示 "img_navsprites.gif" 的图像的一部分:

实例

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

实例解析:

  • 由于该列表项包含一个链接,我们可以使用:hover伪类
  • #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像,我们指定相同的背景位置,只是每个再向下45px