我正在尝试找出一种在我正在进行的元素中使用多种背景颜色的方法。该设计在背景上采用 4 种颜色。 1 个用于页眉和内容，1 个用于侧边栏，1 个用于 2 个页 footer 分。 在这些上设置背景颜色就像馅饼一样简单 - 当我需要使颜色实际增长到容器之外(匹配浏览器的宽度)但容器本身的最大宽度仍然为 940px 时，问题就来了。
我使用 Twitter Bootstrap 3 作为元素的样板。
有什么建议吗？
最佳答案
如果背景图像是一个选项，那么您可以将页面拆分为顶部和底部，然后将背景图像应用于这些容器。
您的 HTML 看起来像这样:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
<div class="main-wrapper">
<div class="container">
<header class="header" role="banner">
…
</header>
<div class="row">
<section class="col-8" role="main">
…
</section>
<aside class="col-4" role="complementary">
…
</aside>
</div>
</div>
</div>
<footer class="footer" role="contentinfo">
<div class="container">
…
</div>
</footer>
</body>
</html>
然后您只需为 .main-wrapper 和 .footer 创建样式，将平铺背景图像应用于它们。
创建一个名为application.css 的新样式表并在bootstrap.min.css 之后加载它，并在其中放置以下CSS 规则:
.main-wrapper {
background: url(../img/main-bg.png) repeat-y 50% 0;
}
.footer {
background: url(../img/footer-bg.png) repeat-y 50% 0;
}
关于css - 多 body 背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18335877/