CSS 背景屬性5個應用實例.

發(fā)布時間：2009-09-14 10:34:42 作者：佚名

背景(background)在項目中經常會使用。這篇文章主要講解的是實際項目中的5個實例。通過具體的分析來達到學習的目的。

1，Li列表通過ul 和 li 的方式，我們可以構造出一些無序列表。通過ul+li，我們不僅可以做出一些漂亮的菜單，也可以做出一些完美的樹形結構。 ul+li默認樣式在前面有個小黑點，實際項目中我們可以通過背景來代替這個小黑點。
下面我們看2個實例：
http://demo.jb51.net/html/cssbackground/a1/demo1.html
http://demo.jb51.net/html/cssbackground/a1/demo2.html

2,文本替換文本替換也是項目中比較常見的技術。實際開發(fā)中經常需要使用圖片來替換文本。通過背景來代替文本。
下面我們看3個實例：
http://demo.jb51.net/html/cssbackground/a2/demo1.html
http://demo.jb51.net/html/cssbackground/a2/demo2.html
http://demo.jb51.net/html/cssbackground/a2/demo3.html
當然我需要對前面的2個實例進行一下補充說明：
在例2中，通過text-indent:-9999px;屬性把文字隱藏到看不到的地方。當然有一缺點：禁止圖片下載時，什么都沒有了。
在例3中，通過添加額外標簽，然后使用定位方式把背景定位在上層，來遮住文字。也有一缺點：圖片需要能完全遮住文字，要實底的圖片。

3,自適應按鈕自適應在實際中也經常使用，通過自適應，我們不需要做額外的圖片。我以前看過一些老的項目，給不同文字的按鈕做了好多不同的圖片，然后每個按鈕的樣式有btn2word,btn4word,btn6word.... 可見非常不靈活。自適應按鈕能從根本上解決這個問題。
我們來看1個實例：
http://demo.jb51.net/html/cssbackground/a3/demo1.html
你已經看到了，自適應需要至少2個閉合元素。通過一個背景左對齊和另一個背景圖片的右對齊來做成自適應按鈕。

4,圓角以前很多項目都是方角，不知什么時候起，流行起圓角了。就像汽車一樣，以前的桑塔納的邊角都是方角的，現(xiàn)在的車都是圓角的了。
圓角的實現(xiàn)方式跟自適應有點類似，只不過背景的對齊方式有點區(qū)別罷了。
http://demo.jb51.net/html/cssbackground/a4/demo1.html

5,等高欄這個是最近在看無懈可擊的Web設計中的一個例子，的確作者也講解的非常不錯。而且以前在做項目中，的確遇到過這個問題。不過解決方式貌似沒作者這么簡單。
話不多說，先看3個實例：
http://demo.jb51.net/html/cssbackground/a5/demo1.html
http://demo.jb51.net/html/cssbackground/a5/demo2.html
http://demo.jb51.net/html/cssbackground/a5/demo3.html
或許你已經看明白了我將要講解什么。對了，就是側邊欄跟主體欄的高度問題。實際應用中，我們經常要使他們2個呈現(xiàn)一樣的高度。通過對最外層元素使用背景圖片來達到了這種效果。
打包下載