css - 不同颜色的 body 背景

Question

我为 body 元素设置为 background-image 的图像有问题，但由于页面长度不同，它无法正常工作。有没有办法为每个主要 HTML 元素添加不同的主体背景颜色？

例如，在这个website我需要页眉周围的主体颜色为白色，然后网站的主要容器具有灰色渐变，最后页脚具有灰色纯色。

后期编辑:根据 Joseph Silber 的推荐，我阅读了 Full Browser width Bars文章和评论中我找到了一个非常简单的解决方案来解决我的问题，您可以在下面的代码或 jsFiddle 上看到它:

#header {
background: white;
margin: 0 -2000px;
padding: 0 2000px;
}
#main   {
background: green;
margin: 0 -2000px;
padding: 0 2000px;
}
#footer {
background: gray;
margin: 0 -2000px;
padding: 0 2000px;
}
.content {
overflow-x: hidden;
}

甚至以后更新:如果您遇到水平滚动问题，请将 overflow-x 属性也应用于 html 元素:

html, body {
overflow-x: hidden;
}

Answer 1

我通过创建一个可重用的 .content div 来实现这一点，我将其放置在每个部分中，宽度固定，如下所示:

<div id="header">
    <div class="content">

    </div>
</div>
<div id="main">
    <div class="content">

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

    </div>
</div>

将您想要的每个部分的背景颜色分配给父 div，这将“自然地”延伸到浏览器窗口的宽度上:

#header {background: #000;}
#main   {background: #ccc;}
#footer {background: #fff;}

然后给.content一个固定的宽度:

.content {
    margin: 0 auto;
    width: 960px;
}