css - div背景颜色不显示

时间：2014-05-03 10:14:31

标签： html css background-color

我试图使div的背景颜色：content2与div：sidebar的颜色相同。但是，背景颜色不显示content2，但它适用于侧边栏。

此外，我正在尝试使页眉和页脚栏透明，但它似乎不起作用。

这是我的css代码

body {
    background-image: url('background.jpg');
    background-size: 100% 100%;
    padding: 0px 0px 0px 0px;
    font-size: 13px;
    position: relative;
    min-height: 400px;
}
 #footer {
    float: left;
    height: 20px;
    width: 100%;
    border: 1px solid black;
    text-align: center;
    padding: 30px 0px 20px 0px;

    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    box-shadow: 2px 2px 3px #666666;
    -webkit-box-shadow: 2px 2px 3px #666666;
    -moz-box-shadow: 2px 2px 3px #666666;
    background: #8B8B8B;
    background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
    background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    border: solid 1px #6D6D6D;
    position:relative;
    z-index:999;

    //transparency
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
 }
 #content2 { //sign in page
    background-color: #EEE;
    float: left;
    margin: 38px 20px 38px 200px;
    height: 370px;
    width: 550px;
    border: 1px solid black;
    padding: 15px;
    padding-top: 20px;
    font-size: 18px;
 }
 #sidebar {
    background-color: #EEE;
    float: left;
    margin: 38px 200px 38px 20px;
    height: 300px;
    width: 250px;
    border: 1px solid black;
    padding: 15px;
 }
 #menucontainer{
    width: 79.5%;
    text-align: center;

    margin: 0px 0px 0px 0px;
    padding: 6px 6px 4px 270px;
    height: 60px;
    line-height: 25px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    box-shadow: 2px 2px 3px #666666;
    -webkit-box-shadow: 2px 2px 3px #666666;
    -moz-box-shadow: 2px 2px 3px #666666;
    background: #8B8B8B;
    background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
    background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    border: solid 1px #6D6D6D;
    z-index:999;
}
#menu-bar {
    width: 624px;
    margin-left: auto;
    margin-right: auto;
    height: 395px;
}

这是我的HTML代码 

    <div id="menucontainer">
        <ul id="menu-bar">
            menu
        </ul>
    </div>

    <div id="content2">
        content 2
    </div>

    <div id="sidebar">
        side bar
    </div>

    <div id="footer">
        footer
    </div>

</body>

任何人都可以帮我这个吗？感谢

5 个答案:

答案 0 :(得分：2)

这是因为您使用//来评论CSS中的单行。您可以使用/*和*/对在CSS中发表评论。所以以下所有的CSS都被丢弃了。请检查此Demo

答案 1 :(得分：1)

替换评论＆＃34; //登录页面＆＃34;使用＆＃34; / *登录页面* /＆＃34;

答案 2 :(得分：0)

//仅在您编写和.scss文件（sass）时有效，这通常也是javascript的注释语法。 标准css注释语法为/* your comment here */

答案 3 :(得分：0)

工作正常。
但事情是样式标签里面的评论应该通过这种方式来完成/ * - * / 

 <!DOCTYPE html>
 <html>
   <head>  
    <style type="text/css">
     body {
       background-image: url('background.jpg');
       background-size: 100% 100%;
       padding: 0px 0px 0px 0px;
       font-size: 13px;
       position: relative;
       min-height: 400px;
    }
    #footer {
     float: left;
     height: 20px;
     width: 100%;
     border: 1px solid black;
     text-align: center;
     padding: 30px 0px 20px 0px;

     border-radius: 24px;
     -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
     box-shadow: 2px 2px 3px #666666;
     -webkit-box-shadow: 2px 2px 3px #666666;
    -moz-box-shadow: 2px 2px 3px #666666;
    background: #8B8B8B;
    background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
    background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    border: solid 1px #6D6D6D;
    position:relative;
    z-index:999;

   /*transparency*/
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
 }
 #content2 { 
    background-color: #EEE;
    float: left;
    margin: 38px 20px 38px 200px;
    height: 370px;
    width: 550px;
    border: 1px solid black;
    padding: 15px;
    padding-top: 20px;
    font-size: 18px;
 }
 #sidebar {
    background-color: #EEE;
    float: left;
    margin: 38px 200px 38px 20px;
    height: 300px;
    width: 250px;
    border: 1px solid black;
    padding: 15px;
 }
 #menucontainer{
   width: 79.5%;
   text-align: center;

   margin: 0px 0px 0px 0px;
   padding: 6px 6px 4px 270px;
   height: 60px;
   line-height: 25px;
   border-radius: 24px;
   -webkit-border-radius: 24px;
   -moz-border-radius: 24px;
   box-shadow: 2px 2px 3px #666666;
   -webkit-box-shadow: 2px 2px 3px #666666;
   -moz-box-shadow: 2px 2px 3px #666666;
    background: #8B8B8B;
    background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
    background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    border: solid 1px #6D6D6D;
    z-index:999;
  }
  #menu-bar {
    width: 624px;
    margin-left: auto;
    margin-right: auto;
    height: 395px;
  }
 </style>
</head>
<body>
    <div id="menucontainer">
    <ul id="menu-bar">
        menu
    </ul>
</div>

<div id="content2">
    content 2
</div>

<div id="sidebar">
    side bar
</div>

<div id="footer">
    footer
</div>

 </body>

  </html>

JS小提琴： http://jsfiddle.net/zRS84/

答案 4 :(得分：0)

在页眉和页脚div #footer和#menucontainer

中添加不透明度 
#menucontainer {
opacity: 0.5;
}

或更改背景样式代码，如此

#menucontainer {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(169, 169, 169, 0.8)), to(rgba(124, 124, 124, 0.8)));

background: -moz-linear-gradient(top,  rgba(169, 169, 169, 0.8),  rgba(124, 124, 124, 0.8) ); }

并且对于内容2中的背景，在类＃content2

中添加背景属性 
#content2 {
float: left;
margin: 38px 20px 38px 200px;
height: 370px;
width: 550px;
border: 1px solid black;
padding: 15px;
padding-top: 20px;
font-size: 18px;
background: #ccc; 
}

并从您的代码中删除这些内容

//透明度

//登录页面

相关问题
最新问题