用CSS來控制網(wǎng)頁背景[一]

《用CSS來控制網(wǎng)頁背景[一]》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、用CSS來控制網(wǎng)頁背景我想大家常常為一些比較合適于自己的網(wǎng)頁背景的圖片而發(fā)愁吧，這個我想也是有的，因為這些圖片不是太大就是太小，或者太亂，那么有沒有辦法讓圖片能合自己的主頁的胃口呢？答案是肯定的。想知道怎么來實現(xiàn)嘛，好吧，大家現(xiàn)在開始跟著我做，我保證大家一定一學就會。不過，我想在網(wǎng)上“成家”的朋友一般分為在網(wǎng)吧里“開業(yè)”（就像我一樣，剛開始從他人的主頁拉相關(guān)的代碼來改的），還有就是在自己家里用DW或FP之類的專業(yè)軟件制作好上傳的，所以呢，我打算分開兩步介紹，首先為在網(wǎng)吧里“開業(yè)”的朋友著想吧，最后再簡要的介紹一些用DW4

2、做的背景樣式。其實總得說來一切都是一樣的，只不過是采用的方式不同罷了。好了閑話少說了，現(xiàn)在就入正題吧。說到背景也就只有背景顏色和顏色圖片，這兩個我想大家一定都知道在里加入bgcolor="#808080"和background="URL"對吧，可是我這里將要介紹不是這樣做的，而是用CSS樣式來做的，雖說有些麻煩，可是整體配合還是非常不錯的?！け尘邦伾玝ackground-color　　我想這個我就不用多做介紹了，顏色代碼我想大家都知道的，不是用英文來代替就是用指定的代碼來表示的。這個的默認值是transparent（透明

3、色）。例：body{background-color:yellow}H1{background-color:#000000}·背景圖片background-image　　背景圖片和背景顏色在HTML里面的設(shè)置也是基本相同的，都可以在里加入相關(guān)的語句來完成。但是在這里，我所指的并非是用這種方法，我用的方法還是CSS。background-image這個的主要功能也就是用來顯示圖片，如果需要顯示圖片的話，那么只要在后面加上url(圖片的地址）就可以了，不顯示嘛，那是最簡單不過的了，什么也不要就行了，因為這個默認的就是none

4、，而要加的話，就是在后面加上這個none就可以了。例：body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')}h1{background-image:url('none')}　　大家在使用里的背景圖片時，一定常常遇到一些圖片因為太小，而產(chǎn)生種種如圖片的重復(fù)出現(xiàn)而破壞了整個頁面的美感，想換成其它圖片又不合適之類的麻煩情況吧。不過現(xiàn)在好了，大家只要用了以下的幾個CSS里控制圖片方法，那么你以后就不會再有此類的麻煩事發(fā)生了。·圖片是否重復(fù)顯示backgroun

5、d-repeat　　有時候重復(fù)顯示是需要的，可是有時候重復(fù)顯示則是讓人頭痛的，現(xiàn)在這個可以很好的幫助你了，而且它還可以幫你控制圖片重復(fù)的方式（水平方向重復(fù)、垂直方向重復(fù)以及兩個方向都有重復(fù)），而要實現(xiàn)這三個方向的重復(fù)也就只要在bcackground-repeat后面加上repeat-x（水平方向鋪開）、repeat-y（垂直方向鋪開）、repeat（兩個方向鋪開）。當然，它可以控制圖片的重復(fù)，也可以控制圖片不重復(fù)的。no-repeat這個就是用來表示只顯示一幅背景圖片，而不是重復(fù)出現(xiàn)的，這個可不是默認的喲，默認的是重復(fù)顯

6、示背景圖片（repeat）。例：body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat}·定位圖片顯示位置background-position　　一張背景圖片經(jīng)過上面的設(shè)置后往往還不夠的，因為當你使用上面的不重復(fù)顯示設(shè)置后，圖片只顯示在頁面的左上角，而不會在其它地方，可是如果要在中間或者其它地方出現(xiàn)這張背景圖片的話，那么background-position這個就可以幫你了，因為它就是用來顯示圖片

7、相對于左上角的一個位置的（就是默認的值0%0%），由兩個值來設(shè)定，中間用空格來隔開。它的主要的幾個值有l(wèi)eft

8、center

9、right和top

10、center

11、bottom，也可以用百分數(shù)值指定相對位置或用一個值來指定絕對位置，如50%表示的位置是在中心，而50px的水平值則表示圖片距左上角區(qū)域水平移動50px單位；這里要特別指出的是，1當你設(shè)置值的時候只提供一個值，則相當于只指定水平位置，垂直自動設(shè)置為50%；2當你設(shè)置的值是負數(shù)的時候，則表示背景圖片超出邊界。例：body{background-image:url('

12、file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-position:100px10px}·控制圖片是否滾動background-attachment　　上面的兩步可以幫你完成圖像的定位，可是這樣做好以后還不是完美的，因為