div 的背景颜色属性

Question

我需要为网站主页中的内容 div 添加背景颜色。主div的宽度是980px，内容div在主div里面。网站设计类似于下图。我尝试使用背景图片，但它的位置会根据屏幕分辨率而变化，而且我只需要在主页上使用这种设计。有什么建议吗？

<html>
<head></head>
<body>
<div id="main" style="width:980px; margin: 0 auto;">
<div id="header"><!--div content here--></div>
<div id="des"><!--contents in between header and footer--></div>
<div id="footer"> Footer content here</div>
</div>
</body>
</html>

例如上面的'wave'形状的图片，我用它作为header的背景图片。下面是 header div 的样式。但是我只能在主 div.

中看到波浪图像

<style>
#header {
    width: 100%;
    height: 68px;
    background-image: url(../../image/header_line.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 4px;
}
</style>

Answer 1

试试这段代码：

HTML:

<div class="outer-container blue">
    <div class="main-container"></div>
</div>
<div class="outer-container green">
    <div class="main-container"></div>
</div>
<div class="outer-container red">
    <div class="main-container"></div>
</div>

CSS:

.outer-container{width: 100%;}
.outer-container .main-container{width: 980px;margin: 0 auto;height: 100px;}
.blue .main-container{background: blue;}
.green .main-container{background: green;}
.red .main-container{background: red;}

参考这个fiddleFiddle

Answer 2

HTML:

<div class="container">
  <div class="content_div"></div>
</div>

CSS:

.container{
width:300px;
height:300px;
background-color:#000;
position:relative;
margin-left:100px;
margin-top:60px;}

.content_div{
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
height:60px;
width:100%;
background-color:#f00;
margin-top:auto;
margin-bottom:auto;
}

尝试Fiddle:

div 的背景颜色属性

Background color property for div

html

css

background-image

background-color

div 的背景颜色 属性

Background color property for div

html

css

background-image

background-color

div 的背景颜色属性