站长之家制作并测试CSS Sprites技术实现实例

当前位置：网站首页 >> 网站技术 >>

	<center>站长之家制作并测试CSS Sprites技术实现实例</center><br/><br/>
	<center>
	  【发布人：站长之家    发布日期：2015-04-04】
	</center><br/>
	<p>在网站上的图片较多的时候，尤其是一些图标式图片较多的时候，站长们可以采用CSS Sprites技术来首先把这些图片贴合到一张图片上，然后在用浏览器打开时，再把这些图片分离出来，以背景图片的方式显示在网页的相应位置。这样做的好处是可以减少浏览器在打开网页时的http请求次数，降低网站服务器的负担，加快网页的打开速度，提升网站性能，尤其是在网页图片非常多的时候，每一个图片都需要http请求，然而如果把这些图片贴合合成一个较大的图片，但是只需要请求一次，这样就明显减少了http请求，杜宇提升网站服务器性能很有帮助，特别是对于那些大型网站，更是如此。使用CSS Sprites技术的方法首先是把一些图片贴合到一张图片上，然后利用CSS代码里的background:url(allico.jpg) no-repeat代码将图片作为背景的方式下载到浏览器客户端，最后在使用background-position来对各个图片进行定位，并把各个图片显示在相应的位置。下面站长之家写出了一个使用CSS Sprites技术的实例，说明如何使用CSS Sprites技术来显示图片。</p>

	下面是利用CSS Sprites技术实现显示图片的实例，下面是源代码，该源代码在多个浏览器如IE、Chrome、360浏览器上测试通过：
	<p><br/>
	  <br/>
	  <br/>
	  <br/>
    <title>采用CSS Sprites技术显示图片减少http请求实例</title></p>

	<p><br/>
	</p>
	<p>以下是已经将图标拼合后的图片：<br/><img src="http://www.zzdj.net/tech/allico.jpg"/></p><br/>
	<p>下面是将拼合后的图片采用定位的方式<br/>将各个图标分离出来后显示到相应位置：</p><br/>

	<p><br/>
	</p>
	<p>本例中对五个小图标进行贴合成一幅图片allico.jpg，每一个图标的大小均为17*17的大小，所以，在代码中我们对的大小定义为.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软件来定位，如下面图中的图一中的红色圈中所表示的图片定位坐标数据，这样我们就可以定位每一福图片的大小和位置了。下面图中的图二是本实例代码执行的结果，从图二中可以看出贴合后的图片，以及运行后的显示效果。各位站长们还可以对代码按照自己的需要进行修改，从而能够制作出更多样式的显示效果出来，为站长们的网站增一分光彩。</p>
	<p align="center"><img src="http://www.zzdj.net/images/csssprites.jpg" width="500" height="251" alt="CSS Sprites技术实现测试实例图片"/></p>
	<br/>