css基础：把所有背景图都集成在一张图片上，减少图片服务器请求次数

好象现在越来越流行这种玩法了，原来大家都是把背景切成单个小图片，要用背景的时候一个个定义，这样页面打开的时候，也会加载各个小图片，但是这种办法把所有小图片都集中在一张图中，定义背景时用坐标定位，再结合高度，宽度限制等手段，过到相同的效果，好处是:虽然下载的总K数不会有明显变化，但是图片的请求次数却明显减少了。

废话不说，直接看代码吧:

<style type="text/css">
.bg1{background:url(bg_v.png) no-repeat 0 0;padding-left:20px;}
.bg2{background:url(bg_v.png) no-repeat 0 -20px;padding-left:20px;}
.bg3{background:url(bg_v.png) no-repeat 0 -40px;padding-left:20px;}
.bg4{background:url(bg_v.png) no-repeat 0 -60px;padding-left:20px;}
.bg5{background:url(bg_v.png) no-repeat 0 -80px;padding-left:20px;}
</style>

<a href="#" class="bg1">bg1</a>
<a href="#" class="bg2">bg2</a>
<a href="#" class="bg3">bg3</a>
<a href="#" class="bg4">bg4</a>
<a href="#" class="bg5">bg5</a>

<br /><br />
<img src="bg_v.png" />

效果图：