HTML基礎(四):CSS中關於背景圖的應用技巧,把很多圖片彙總的一張圖片中

來源:互聯網
上載者:User

原文地址: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座標平鋪.這樣就達到我們要的效果了.

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.