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视频教程

以上就是CSS如何设置页面背景色的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！