0

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

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

稍后编辑：根据 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;
}
4

1 回答 1

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;
}
于 2012-07-31T18:58:03.980 回答