HTML基礎（四）：CSS中關於背景圖的應用技巧，把很多圖片彙總的一張圖片中

原文地址：http://leotheme.cn/javascript/about-css-background.html

在CSS中對背景圖的作法.一般都是這樣:

1. background: url(images/*.gif) no-repeat;

但有時候有很多圖片的時候,像我的Maxthon主題,就用了很多的背景圖和表徵圖.這時候如果還這樣做的話就會帶來一個問題,圖片在載入中會有個過程.雖然很快.但有的圖片在一開始並沒有載入進來,而是在響應滑鼠事件時才開始載入.像我的導覽列。預設是一個背景，滑鼠放上去是一個背景，當前頁又是另一個背景。

這時如果還像普通的處理的話,當滑鼠放上去後,並不能馬上看到圖片.所以在Maxthon 2.0中我已經不用以前的方法來做了.而是選擇把所有的背景圖片放到一張圖上.就像下面這樣.

放到一起後，當滑鼠放上去後而不用向伺服器請求,因為圖片已經在第一次就已載入完成，不會產生延遲的效果.這樣做還有個好處，就是可以減少向伺服器請求的次數，從而使載入更快。

現在來說說放到一張圖上後，CSS中該怎麼定義?

以我的導覽列為例:
假如我們在做圖的時候,圖片的上面是預設時的背片,中間是滑鼠放去時的.下面是當前頁碼的.圖片的高度是30PX;那麼這張圖的總高度是90PX;
然後我們在CSS中這樣寫:

[sourcecode lang="css"]#nav li a {background: url(images/bg_nav.gif) 0 0 repeat-x;}預設時的
#nav li a:hover {background: url(images/bg_nav.gif) 0 -30px repeat-x;}滑鼠放上去時的
#nav li a .current {background: url(images/bg_nav.gif) 0 -60px repeat-x;}當前頁效果的[/sourcecode]

我們在CSS中定義的背景圖都是同一張,我們通過改變他的Y座標起始位置來定位.因為我們的高度已經是固定了的30PX,和圖片的高度是一樣的.然後讓它沿X座標平鋪.這樣就達到我們要的效果了.