css怎么設(shè)置網(wǎng)頁背景顏色

今天小編給大家分享的是css怎么設(shè)置網(wǎng)頁背景顏色，很多人都不太了解，今天小編為了讓大家更加了解css設(shè)置網(wǎng)頁背景顏色的方法，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會有所收獲的哦。

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

背景顏色 background-color

我想這個我就不用多做介紹了，顏色代碼我想大家都知道的，不是用英文來代替就是用指定的代碼來表示的。這個的默認(rèn)值是transparent（透明色）。例：

body{background-color:yellow} 
H1{background-color:#000000}

背景圖片 background-image

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

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')
} 
h3
{
background-image:url('none')
}

大家在使用里的背景圖片時，一定常常遇到一些圖片因?yàn)樘?，而產(chǎn)生種種如圖片的重復(fù)出現(xiàn)而破壞了整個頁面的美感，想換成其它圖片又不合適之類的麻煩情況吧。不過現(xiàn)在好了，大家只要用了以下的幾個CSS里控制圖片方法，那么你以后就不會再有此類的麻煩事發(fā)生了。

圖片是否重復(fù)顯示 background-repeat

有時候重復(fù)顯示是需要的，可是有時候重復(fù)顯示則是讓人頭痛的，現(xiàn)在這個可以很好的幫助你了，而且它還可以幫你控制圖片重復(fù)的方式（水平方向重復(fù)、垂直方向重復(fù)以及兩個方向都有重復(fù)），而要實(shí)現(xiàn)這三個方向的重復(fù)也就只要在bcackground-repeat后面加上repeat-x（水平方向鋪開）、repeat-y（垂直方向鋪開）、repeat（兩個方向鋪開）。

當(dāng)然，它可以控制圖片的重復(fù)，也可以控制圖片不重復(fù)的。no-repeat這個就是用來表示只顯示一幅背景圖片，而不是重復(fù)出現(xiàn)的，這個可不是默認(rèn)的喲，默認(rèn)的是重復(fù)顯示背景圖片（repeat）。例：

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat
}

定位圖片顯示位置 background-position

一張背景圖片經(jīng)過上面的設(shè)置后往往還不夠的，因?yàn)楫?dāng)你使用上面的不重復(fù)顯示設(shè)置后，圖片只顯示在頁面的左上角，而不會在其它地方，可是如果要在中間或者其它地方出現(xiàn)這張背景圖片的話，那么background-position這個就可以幫你了，因?yàn)樗褪怯脕盹@示圖片相對于左上角的一個位置的（就是默認(rèn)的值0% 0%），由兩個值來設(shè)定，中間用空格來隔開。

它的主要的幾個值有l(wèi)eft　center　right和top　center　bottom，也可以用百分?jǐn)?shù)值指定相對位置或用一個值來指定絕對位置，如50%表示的位置是在中心，而50px的水平值則表示圖片距左上角區(qū)域水平移動50px單位；這里要特別指出的是，1當(dāng)你設(shè)置值的時候只提供一個值，則相當(dāng)于只指定水平位置，垂直自動設(shè)置為50%；2當(dāng)你設(shè)置的值是負(fù)數(shù)的時候，則表示背景圖片超出邊界。例：

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-position:100px 10px
}

控制圖片是否滾動 background-attachment

上面的兩步可以幫你完成圖像的定位，可是這樣做好以后還不是完美的，因?yàn)槿绻愕捻撁嬗袧L動條的時候，那么你這張背景圖片就不會永遠(yuǎn)定位在那個位置了，如果想要圖片永遠(yuǎn)定位在那個位置，就只有讓這張圖片隨著頁面的內(nèi)容的滾動而滾動，這時background-attachment就可以幫你了你只要加入scroll（靜止）和fixed（滾動）中的其中一個就可以了。

當(dāng)然不是讓你亂加的，畢竟scroll是默認(rèn)的，也就是不讓圖片隨頁面的內(nèi)容而滾動的。例：

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-attachment:fixed
}

好了，經(jīng)過以上這番設(shè)置后，我相信你的背景一定會更美的，但是過多的代碼往往可讀性很差，容易讓人產(chǎn)生錯誤，所以在這里我要告訴大家的就是可以把以上的代碼全部加在一起使用，也就是說把以上相關(guān)的代碼加到background中。

在把代碼加到background中的時候要在每個值中間加上空格來隔開，而且不要把背景顏色的代碼放在背景圖片的URL后面，以免圖片顯示不出來。例：

body
{
background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') 
fixed 100px 50px no-repeat
}

注意：如果用代碼直接插入的話，那么一定要放下面這個代碼的里后再放在之間才能正常顯示出來！

關(guān)于css怎么設(shè)置網(wǎng)頁背景顏色就分享到這里了，當(dāng)然并不止以上和大家分析的辦法，不過小編可以保證其準(zhǔn)確性是絕對沒問題的。希望以上內(nèi)容可以對大家有一定的參考價值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。