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" />

效果圖：