用CSS來控制網頁背景

·背景顏色 background-color
* G& ]$ T1 j8 a" S7 u+ q我想這個我就不用多做介紹了，顏色代碼我想大家都知道的，不是用英文來代替就是用指定的代碼來表示的。這個的默認值是transparent（透明色）。
! B0 u  R/ B; l7 U9 p例：body{background-color:yellow}
) x8 G2 d7 O7 g/ h. u* N* w& aH1{background-color:#000000}
+ S# g- o; ]; u4 E9 X7 ]
* g% a! I  ~$ t+ I- s# X# O2 I) J- P·背景圖片 background-image
$ W& x$ Z4 g: K; o0 t4 G  ~背景圖片和背景顏色在HTML裡面的設置也是基本相同的，都可以在裡加入相關的語句來完成。但是在這裡，我所指的並非是用這種方法，我用的方法還是CSS。background-image這個的主要功能也就是用來顯示圖片，如果需要顯示圖片的話，那麼只要在後面加上url(圖片的地址）就可以了，不顯示嘛，那是最簡單不過的了，什麼也不要就行了，因為這個默認的就是none，而要加的話，就是在後面加上這個none就可以了。
! d4 ~6 h9 v- \9 M例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF)}
h1{background-image:url(none)}

' u1 y! B5 _8 E9 |大家在使用裡的背景圖片時，一定常常遇到一些圖片因為太小，而產生種種如圖片的重複出現而破壞了整個頁面的美感，想換成其它圖片又不合適之類的麻煩情況吧。不過現在好了，大家只要用了以下的幾個CSS裡控制圖片方法，那麼你以後就不會再有此類的麻煩事發生了。

3 L; J. m! I! _" M- W  A+ u7 s·圖片是否重複顯示 background-repeat
5 e9 z! z) i9 ?9 I: C( H有時候重複顯示是需要的，可是有時候重複顯示則是讓人頭痛的，現在這個可以很好的幫助你了，而且它還可以幫你控制圖片重複的方式（水平方向重複、垂直方向重複以及兩個方向都有重複），而要實現這三個方向的重複也就只要在bcackground-repeat後面加上repeat-x（水平方向鋪開）、repeat-y（垂直方向鋪開）、repeat（兩個方向鋪開）。當然，它可以控制圖片的重複，也可以控制圖片不重複的。no-repeat這個就是用來表示只顯示一幅背景圖片，而不是重複出現的，這個可不是默認的喲，默認的是重複顯示背景圖片（repeat）。
) s3 {% A1 G! ~7 R. s. V. Y% q# }& h例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat}
' w1 n) {4 W& \& [
7 x8 P5 j4 b0 G/ B  M·定位圖片顯示位置 background-position
- c8 j4 E7 E- t一張背景圖片經過上面的設置後往往還不夠的，因為當你使用上面的不重複顯示設置後，圖片只顯示在頁面的左上角，而不會在其它地方，可是如果要在中間或者其它地方出現這張背景圖片的話，那麼background-position這個就可以幫你了，因為它就是用來顯示圖片相對於左上角的一個位置的（就是默認的值0% 0%），由兩個值來設定，中間用空格來隔開。它的主要的幾個值有left|center|right和top|center|bottom，也可以用百分數值指定相對位置或用一個值來指定絕對位置，如50%表示的位置是在中心，而50px的水平值則表示圖片距左上角區域水平移動50px單位；這裡要特別指出的是，1當你設置值的時候只提供一個值，則相當於只指定水平位置，垂直自動設置為50%；2當你設置的值是負數的時候，則表示背景圖片超出邊界。
例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-position:100px 10px}
' e4 `! A8 N4 J1 `7 [- c" v
+ M7 I  z- d) ?  z: Z·控制圖片是否滾動 background-attachment
# R. |6 n: b8 P# F/ ~7 f! q( j上面的兩步可以幫你完成圖像的定位，可是這樣做好以後還不是完美的，因為如果你的頁面有滾動條的時候，那麼你這張背景圖片就不會永遠定位在那個位置了，如果想要圖片永遠定位在那個位置，就只有讓這張圖片隨著頁面的內容的滾動而滾動，這時background-attachment就可以幫你了你只要加入scroll（靜止）和fixed（滾動）中的其中一個就可以了。當然不是讓你亂加的，畢竟scroll是默認的，也就是不讓圖片隨頁面的內容而滾動的。
7 m" t) L& F. a+ U0 j# z例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-attachment:fixed}
" }8 F; F2 a9 ~' y3 y. h
; C, U5 k) ~+ H4 z% ~. p好了，經過以上這番設置後，我相信你的背景一定會更美的，但是過多的代碼往往可讀性很差，容易讓人產生錯誤，所以在這裡我要告訴大家的就是可以把以上的代碼全部加在一起使用，也就是說把以上相關的代碼加到background中。在把代碼加到background中的時候要在每個值中間加上空格來隔開，而且不要把背景顏色的代碼放在背景圖片的URL後面，以免圖片顯示不出來。
4 i5 e" D4 `! l! u/ ]) k例：body{background:green url(file&:///C:/WINDOWS/BACKGRND.GIF) fixed 100px 50px no-repeat}
% l& T8 O0 {8 i- s
最後提醒一下大家，如果用代碼直接插入的話，那麼一定要放下面這個代碼的裡後再放在之間才能正常顯示出來！
, H+ w1 ~" J3 S& ^4 M
" g1 h; }$ N, c* ]' y* y接下來我再介紹一下用DW4製作以上樣式的方法，因為在DW中已經很詳細的列出各項來了，具體的作用我也說明過了，所以就簡要的介紹一下吧，只要大家能夠明白就行了。
1.在此之前大家應該把CSS Styles這個窗口打開，如未打開的話，那麼就按Shift+F11或者從Window下拉菜單中選擇此項就可以了。
2 N$ b# U( o0 R. e2 i6 v: t: e* _2.點擊右鍵選擇new style...這個選項或者點擊下面的帶有+號的圖標。
3.在彈出的窗口中的選擇如下，tag選擇body因為我們上面介紹的CSS樣式都是關於body的，而在這裡我也只是介紹這個裡面的background，其它的不要介紹內容之內；下面的type選擇第二個；define也選擇第二個，這樣你呆會就可以在該文件中的之間找到一個了，而這裡面的內容其實就是我上面介紹的。呵~_^
4.點擊OK後彈出的窗口才是最重要的。我之前已說過，我們這次主要介紹的是background這個選項，所以在旁邊的窗口中選中它吧。選中以後右邊的窗口將會變成與它相關的設置項，具體的我在上面介紹過了，大家只要參照上面的介紹就可以完成了。不過需要說明一下的是在這個窗口中的最下面兩項其實就是background-position中的水平方向垂直方向。
5.最後再點擊OK就可以完成了。完成後你就可以在該頁的代碼（View下的Code選項）中找到它們了。