Question

我正在尝试找出一种在我正在处理的项目中拥有多种背景颜色的方法。设计在背景上采用4种颜色。标题和内容为1，侧栏为1，2页脚部分为1。在那些上设置背景颜色很容易 - 当我需要使颜色实际上在容器外部（与浏览器的宽度匹配）时，问题就出现了，但仍然有940px的容器本身的最大宽度。

我使用Twitter Bootstrap 3作为项目的样板。

有什么建议吗？

Example markup

Answer 1

如果选择背景图片，则可以将页面拆分为顶部和底部，然后将背景图像应用于这些容器。

您的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;
}

多个身体背景

1 个答案: