div的背景颜色属性答案

【问题标题】：Background color property for divdiv的背景颜色属性
【发布时间】：2015-08-12 06:07:26
【问题描述】：

我需要为网站主页中的内容 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>

【问题讨论】：

你试过什么代码？基本上，如果这个橙色 div 在主 div 内，您需要设置 position absolute; 并设置所需的宽度或使用新的宽度测量单位 width: 100vw;
您还需要设置 left: 0px 以确保它一直到屏幕的左边缘。

标签： html css background-image background-color

【解决方案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;}

参考这个小提琴Fiddle

【讨论】：

在小提琴中它将以拉伸方式显示，因为它小于 980px。但它会在更大的屏幕上正常显示

【解决方案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:

【讨论】：

如果这行得通，那就太好了。您仍然应该尝试解释为什么会这样，您所做的更改等。它使答案更有用