用CSS來控制網頁背景

我想大家常常為一些比較合適於自己的網頁背景的圖片而發愁吧，這個我想也是有的，因為這些圖片不是太大就是太小，或者太亂，那麼有沒有辦法讓圖片能合自己的首頁的胃口呢？答案是肯定的。想知道怎麼來實現嘛，好吧，大家現在開始跟著我做，我保證大家一定一學就會。不過，我想在網上“成家”的朋友一般分為在網吧裡“開業”（就像我一樣，剛開始從他人的首頁拉相關的代碼來改的），還有就是在自己家裡用DW或FP之類的專業軟體製作好上傳的，所以呢，我打算分開兩步介紹，首先為在網吧裡“開業”的朋友著想吧，最後再簡要的介紹一些用DW4做的背景樣式。其實總得說來一切都是一樣的，只不過是採用的方式不同罷了。好了閑話少說了，現在就入正題吧。

說到背景也就只有背景顏色和顏色圖片，這兩個我想大家一定都知道在裡加入bgcolor="#808080"和background="URL"對吧，可是我這裡將要介紹不是這樣做的，而是用CSS樣式來做的，雖說有些麻煩，可是整體配合還是非常不錯的。

·背景顏色 background-color

　　我想這個我就不用多做介紹了，顏色代碼我想大家都知道的，不是用英文來代替就是用指定的代碼來表示的。這個的預設值是transparent（透明色）。
例：body{background-color:yellow}
H1{background-color:#000000}

·背景圖片 background-image

　　背景圖片和背景顏色在HTML裡面的設定也是基本相同的，都可以在裡加入相關的語句來完成。但是在這裡，我所指的並非是用這種方法，我用的方法還是CSS。background-image這個的主要功能也就是用來顯示圖片，如果需要顯示圖片的話，那麼只要在後面加上url(圖片的地址）就可以了，不顯示嘛，那是最簡單不過的了，什麼也不要就行了，因為這個預設的就是none，而要加的話，就是在後面加上這個none就可以了。
例：body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')}
h1{background-image:url('none')}

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

·圖片是否重複顯示 background-repeat

　　有時候重複顯示是需要的，可是有時候重複顯示則是讓人頭痛的，現在這個可以很好的協助你了，而且它還可以幫你控製圖片重複的方式（水平方向重複、垂直方向重複以及兩個方向都有重複），而要實現這三個方向的重複也就只要在bcackground-repeat後面加上repeat-x（水平方向鋪開）、repeat-y（垂直方向鋪開）、repeat（兩個方向鋪開）。當然，它可以控製圖片的重複，也可以控製圖片不重複的。no-repeat這個就是用來表示只顯示一幅背景圖片，而不是重複出現的，這個可不是預設的喲，預設的是重複顯示背景圖片（repeat）。
例：body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat}

·定位元影像片顯示位置 background-position

　　一張背景圖片經過上面的設定後往往還不夠的，因為當你使用上面的不重複顯示設定後，圖片只顯示在頁面的左上方，而不會在其它地方，可是如果要在中間或者其它地方出現這張背景圖片的話，那麼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}

·控製圖片是否滾動 background-attachment

　　上面的兩步可以幫你完成映像的定位，可是這樣做好以後還不是完美的，因為如果你的頁面有捲軸的時候，那麼你這張背景圖片就不會永遠定位在那個位置了，如果想要圖片永遠定位在那個位置，就只有讓這張圖片隨著頁面的內容的滾動而滾動，這時background-attachment就可以幫你了你只要加入scroll（靜止）和fixed（滾動）中的其中一個就可以了。當然不是讓你亂加的，畢竟scroll是預設的，也就是不讓圖片隨頁面的內容而滾動的。
例：body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-attachment:fixed}

　　好了，經過以上這番設定後，我相信你的背景一定會更美的，但是過多的代碼往往可讀性很差，容易讓人產生錯誤，所以在這裡我要告訴大家的就是可以把以上的代碼全部加在一起使用，也就是說把以上相關的代碼加到background中。在把代碼加到background中的時候要在每個值中間加上空格來隔開，而且不要把背景顏色的代碼放在背景圖片的URL後面，以免圖片顯示不出來。
例：body{background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') fixed 100px 50px no-repeat}

　　最後提醒一下大家，如果用代碼直接插入的話，那麼一定要放下面這個代碼的裡後再放在之間才能正常顯示出來！

以上就是用CSS來控制網頁背景的內容，更多相關文章請關注topic.alibabacloud.com（www.php.cn）！

