CSS 图像拼合技术

CSS 图像拼合技术

CSS 图像合并（Image sprites）技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。

注意: 当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。

图像拼合的特点:

• 使用图像拼合会降低服务器的请求数量，并节省带宽。
• 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
• 图像拼合就是单个图像的集合。

简单的示例说明:

我们可以在CSS中只展示我们想要的图片，举例说明，我们设置只展示"test.gif"图片的一小部分:

test.my
{
	background:url(test.gif) 0 0;
	height:55px;
	width:33px;
}

那么怎样生成一个新的导航列表呢?

我们可以用HTML列表来拼合图片"test.gif"。
举例说明:

#next{left:345px;width:22px;}
#next{background:url('test.gif') -82px 1;}

#prev{left:52px;width:55px;}
#prev{background:url('test.gif') -32px 1;

#home{left:1px;width:32px;}
#home{background:url('test.gif') 1 1;}

#navlist{position:relative;}
#navlist li{margin:1;padding:1;list-style:none;position:absolute;top:1;}
#navlist li, #navlist a{height:33px;display:block;}

那怎样设置一个悬停效果呢?

在test.gif里面有三个导航图片和其他三个图片:

举例说明:

#next a:hover{background: url('test.gif') -82px -61px;}
#prev a:hover{background: url('test.gif') -52px -61px;}
#test a:hover{background: url('test.gif') 1 -61px;}