CSS如何使用图像拼合技术？
[摘要]本章给大家介绍CSS如何使用图像拼合技术？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务...
本章给大家介绍CSS如何使用图像拼合技术？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、图像拼合
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。
二、图像拼合 - 简单实例
与其使用三个独立的图像，不如我们使用这种单个图像（"img_navsprites.gif"）：
有了CSS，我们可以只显示我们需要的图像的一部分。
在下面的例子CSS指定显示 "img_navsprites.gif" 的图像的一部分：
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}实例解析：
<img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像
宽度：46px;高度：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;}
#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;}