欢迎你来到站长之家！
在网站上的图片较多的时候，尤其是一些图标式图片较多的时候，站长们可以采用CSS Sprites技术来首先把这些图片贴合到一张图片上，然后在用浏览器打开时，再把这些图片分离出来，以背景图片的方式显示在网页的相应位置。这样做的好处是可以减少浏览器在打开网页时的http请求次数，降低网站服务器的负担，加快网页的打开速度，提升网站性能，尤其是在网页图片非常多的时候，每一个图片都需要http请求，然而如果把这些图片贴合合成一个较大的图片，但是只需要请求一次，这样就明显减少了http请求，杜宇提升网站服务器性能很有帮助，特别是对于那些大型网站，更是如此。使用CSS Sprites技术的方法首先是把一些图片贴合到一张图片上，然后利用CSS代码里的background:url(allico.jpg) no-repeat代码将图片作为背景的方式下载到浏览器客户端，最后在使用background-position来对各个图片进行定位，并把各个图片显示在相应的位置。下面站长之家写出了一个使用CSS Sprites技术的实例，说明如何使用CSS Sprites技术来显示图片。
下面是利用CSS Sprites技术实现显示图片的实例，下面是源代码，该源代码在多个浏览器如IE、Chrome、360浏览器上测试通过：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>采用CSS Sprites技术显示图片减少http请求实例</title>
<style type="text/css">
.ulsprites{ list-style:none; float:left; margin:0 auto; padding:0; border:1px solid #F00; width:280px; height:150px;}
.ulsprites li{ font-size:14px; height:20px; line-height:20px; overflow:hidden; margin-top:8px; margin-left:10px;}
.ulsprites li span{ float:left; width:17px; height:17px; background:url(allico.jpg) no-repeat; overflow:hidden;}
.ulsprites li a{ margin-left:5px;}
.ulsprites li span.a1{ background-position: -8px -6px;}
.ulsprites li span.a2{ background-position: -32px -6px;}
.ulsprites li span.a3{ background-position: -56px -6px;}
.ulsprites li span.a4{ background-position: -80px -6px;}
.ulsprites li span.a5{ background-position: -104px -6px;}
</style>
</head>
<body>
<p>以下是已经将图标拼合后的图片：<br /><img src="allico.jpg" /></p>
<p>下面是将拼合后的图片采用定位的方式<br />将各个图标分离出来后显示到相应位置：</p>
<ul class="ulsprites">
<li><span class="a1"></span><a href="#">本文为创作的WORD文档</a></li>
<li><span class="a2"></span><a href="#">本文档为Excel数据表格</a></li>
<li><span class="a3"></span><a href="#">本PPT文档为制作的幻灯片</a></li>
<li><span class="a4"></span><a href="#">本文件为网站PDF文档</a></li>
<li><span class="a5"></span><a href="#">文文档为站内文本文件</a></li>
</ul>
</body>
</html>
本例中对五个小图标进行贴合成一幅图片allico.jpg，每一个图标的大小均为17*17的大小，所以，在代码中我们对<span>的大小定义为.ulsprites li span{ float:left; width:17px; height:17px; background:url(allico.jpg) no-repeat; overflow:hidden;} 宽和高都是17的大小。在定位图片的时候，我们采用了.ulsprites li span.a1{ background-position: -32px -6px;} 这样的定位方式，即采用background-position的属性定位，属性值的确认我们可以采用PS软件来定位，如下面图中的图一中的红色圈中所表示的图片定位坐标数据，这样我们就可以定位每一福图片的大小和位置了。下面图中的图二是本实例代码执行的结果，从图二中可以看出贴合后的图片，以及运行后的显示效果。各位站长们还可以对代码按照自己的需要进行修改，从而能够制作出更多样式的显示效果出来，为站长们的网站增一分光彩。
（本页地址为：http://www.zzdj.net/tech/tech-9.html，请尊重别人劳动，不要复制和采集。转载请注明本文出处）
