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

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

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

图像拼合

我们可以把多个图片合成单个图像

比如这张 "img_navsprites.gif"

然后使用 CSS 只显示我们需要的图像的一部分

下面的 CSS 样式只会显示 "img_navsprites.gif" 的图像的一部分

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

运行范例 »

1. <img class="home" src="img_trans.gif" />

   因为不能为空,src 属性只定义了一个小的透明图像

   显示的图像将是我们在 CSS 中指定的背景图像

2. 宽度：46px;高度：44px;

   定义我们使用的那部分图像

3. 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;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

运行范例 »

1. #navlist{position:relative;}

   位置设置相对定位，让里面的绝对定位

2. #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}

   margin 和 padding 设置为 0，列表样式被删除，所有列表项是绝对定位

3. #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') no-repeat -91px 0;}

  定义背景图像右边91px（＃home 46px+1px 的分割线 +＃prev 宽 43px+1px的分隔线）

图像拼合 - 悬停效果

我们还可以给导航列表中添加一个悬停效果

:hover 选择器用于鼠标悬停在元素上的显示的效果提示

:hover 选择器可以运用于所有元素

我们的新图像 ("img_navsprites_hover.gif") 包含三个导航图像和三幅图像

因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载

添加悬停效果只添加三行代码

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

运行范例 »

1. 由于该列表项包含一个链接，我们可以使用 :hover 伪类

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

   对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下 45px