當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS设置页面背景色

發布時間：2025/3/20 CSS 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS设置页面背景色小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS設置頁面背景色

? ? ? ? ? 設置頁面的背景色

? ? ? ? ??CSS通過設置body標記的background-color屬性來實現，背景色主要突出頁面的主題，跟前景的文字顏色相配合。

? ? ? ? ??具體的設定方法和文字顏色值的設定一樣，可以采用十六進制、RGB各分量，或者顏色的英文單詞等。

<html><head><title>背景顏色</title><style></style></head><body><img src=" http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg "style="float:right;">春季，地球的北半球開始傾向太陽，收到越來越多的太陽光直射，因而氣溫開始升高。隨著冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物蘇醒，許多以卵過冬的動物孵化，鳥類開始遷移，離開越冬地向繁衍地進發。許多動物在這段時間里發情，因此中國也將春季稱為“萬物復蘇”的季節。春季氣溫和生物界的變化對人的心理和生理也有影響。對農民來說，春季是播種許多農作物的季節。在春季，地球的北半球開始傾向太陽，收到越來越多的太陽光直射，因而氣溫開始升高。隨著冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物蘇醒，許多以卵過冬的動物孵化，鳥類開始遷移，離開越冬地向繁衍地進發。許多動物在這段時間里發情，因此中國也將春季稱為“萬物復蘇”的季節。春季氣溫和生物界的變化對人的心理和生理也有影響。</body> </html> ? ? ? ? ??代碼如上，可以看到背景顏色為深綠色，文字的顏色為亮綠色，再加上圖片以及文字內容本身，將春天萬物復蘇顯示了出來。

? ? ? ? ??用背景色給頁面分塊

? ? ? ? ??Background-color屬性不僅可以設置頁面的背景顏色，幾乎所有的HTML元素的背景色都可以通過它來設定。

? ? ? ? ??因此，很多網頁都通過設定不同的背景色來實現分塊的效果。

<html><head><title>利用背景顏色分塊</title><style></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"> 首頁 分類討論 談天說地 精華區 我的信箱 休閑娛樂 立即注冊 離開本站</td><td class="mainpart">正文內容……</td></tr></body> </html> ? ? ? ? ??代碼如上，頂端的Banner、左側的導航條和中間的正文部分分別運用了3中不同的背景顏色，實現了頁面分塊的目的，這種分塊的方法在網頁制作中經常使用。

? ? ? ? ??這里，頂端的Banner圖片可以是一副，從左到右顏色漸變的圖片，顏色由本身的圖片過渡到頁面的背景顏色，就會顯示十分自然，這種效果在Photoshop中很容易實現，也是網頁制作的常用方法。

總結

以上是生活随笔為你收集整理的CSS设置页面背景色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。