CSS如何实现图像拼合功能?

一、简介

CSS图像拼合技术，通常被解释为“CSS图像拼合”或“CSS贴图定位”，是一种将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景的方法。这种方法主要用于网页中的小图标，并因此得名“精灵图”。

使用CSS图像拼合技术的好处主要有两方面：

1、可以降低服务器的请求次数，有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求，而使用图像拼合可以减少服务器的请求次数，从而提高网页加载速度；

2、可以提高网页的美观性。通过精确地控制背景图片的位置和大小，可以使网页的背景图案更加整齐、美观。

二、图像拼合

1、基本方法

与其使用三个独立的图像，不如使用这种单个图像（”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）。

2、创建导航列表

使用拼合图像 (“img_navsprites.gif”)可以创建一个具有链接和背景图像的导航列表。接下来将使用一个 HTML 列表来实现这一目标，因为它可以很好地支持链接功能，并且可以通过 CSS 来设置背景图像：

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

例子解析：

#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’) no-repeat -91px 0;}：定义背景图像向右侧定位91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）。

这样，使用图像拼合就创建了一个带有链接和悬停效果的导航列表。

3、悬停效果

接下来，我们将为导航列表中的每个元素添加一个悬停效果。使用 :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;}

例子解析：