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>

对于例如顶部的“波浪”形图像，我将其用作标题的背景图像。下面是标题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;}

请参阅此小提琴Rperform

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的背景颜色属性

2 个答案: