首頁 > 文章 > web前端 > CSS如何設定頁面背景色

CSS如何設定頁面背景色

醉折花枝作酒筹原創: 2021-04-20 09:51:295881瀏覽

在css中，可以使用「background-color」屬性來設定頁面背景色，語法「background-color:顏色值」。 background-color屬性設定元素的背景顏色，元素背景是元素的總大小，包括填滿和邊界（但不包括邊距）。

CSS如何設定頁面背景色

本教學操作環境：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影片教學

以上是CSS如何設定頁面背景色的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：塊元素如何與行內元素轉化下一篇：塊元素如何與行內元素轉化

看更多