溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關CSS怎么設置頁面背景色，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
在css中，可以使用“background-color”屬性設置頁面背景色，語法“background-color:顏色值”。background-color屬性設置元素的背景顏色，元素背景是元素的總大小，包括填充和邊界（但不包括邊距）。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
設置頁面的背景色
CSS通過設置body標記的background-color屬性來實現，背景色主要突出頁面的主題，跟前景的文字顏色相配合。具體的設定方法和文字顏色值的設定一樣，可以采用十六進制、RGB各分量，或者顏色的英文單詞等。
<span style="font-size:24px;"><html>
<head>
<title>
背景顏色
</title>
<style>
<!--
body{
background-color:#5b8a00;
margin:0px;
padding:0px;
color:#c4f762;
}
p{
font-size:15px;
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{
font-size:80px;
font-family:黑體;
float:left;
padding-right:5px;
padding-left:10px;
padding-top:8px;
}
-->
</style>
</head>
<body>
<img src="
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg
"style="float:right;">
<span>春</span>
<p>季，地球的北半球開始傾向太陽，收到越來越多的太陽光直射，因而氣溫開始升高。隨著冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物蘇醒，許多以卵過冬的動物孵化，鳥類開始遷移，離開越冬地向繁衍地進發。許多動物在這段時間里發情，因此中國也將春季稱為“萬物復蘇”的季節。春季氣溫和生物界的變化對人的心理和生理也有影響。</p>
<p>對農民來說，春季是播種許多農作物的季節。在春季，地球的北半球開始傾向太陽，收到越來越多的太陽光直射，因而氣溫開始升高。隨著冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物蘇醒，許多以卵過冬的動物孵化，鳥類開始遷移，離開越冬地向繁衍地進發。許多動物在這段時間里發情，因此中國也將春季稱為“萬物復蘇”的季節。春季氣溫和生物界的變化對人的心理和生理也有影響。</p>
</body>
</html></span>代碼如上，可以看到背景顏色為深綠色，文字的顏色為亮綠色，再加上圖片以及文字內容本身，將春天萬物復蘇顯示了出來。
用背景色給頁面分塊
Background-color屬性不僅可以設置頁面的背景顏色，幾乎所有的HTML元素的背景色都可以通過它來設定。因此，很多網頁都通過設定不同的背景色來實現分塊的效果。
<span style="font-size:24px;"><html>
<head>
<title>
利用背景顏色分塊
</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#ffebe5;
}
.topbanner{
background-color:#fbc9ba;
}
.leftbanner{
width:22%;height:330px;
vertical-align:top;
background-color:#6d1700;
color:#FFFFFF;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table cellpadding="0"cellspacing="1" width="100%" border="0">
<tr>
<td colspan="2"class="topbanner"><img src="
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg
"border="0"></td>
</tr>
<tr>
<td class="leftbanner">
<br><br>首頁<br><br>分類討論
<br><br>談天說地<br><br>精華區
<br><br>我的信箱<br><br>休閑娛樂
<br><br>立即注冊<br><br>離開本站
</td>
<td class="mainpart">正文內容……</td>
</tr>
</body>
</html></span>代碼如上，頂端的Banner、左側的導航條和中間的正文部分分別運用了3中不同的背景顏色，實現了頁面分塊的目的，這種分塊的方法在網頁制作中經常使用。
這里，頂端的Banner圖片可以是一副，從左到右顏色漸變的圖片，顏色由本身的圖片過渡到頁面的背景顏色，就會顯示十分自然，這種效果在Photoshop中很容易實現，也是網頁制作的常用方法。
關于“CSS怎么設置頁面背景色”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
