0

我正在尝试找出一种在我正在从事的项目中使用多种背景颜色的方法。该设计在背景上有 4 种颜色。1 用于页眉和内容，1 用于侧边栏，1 用于 2 个页脚部分中的每一个。在这些上设置背景颜色很容易 - 当我需要使颜色实际增长到容器之外（与浏览器的宽度匹配）但容器本身的最大宽度仍然为 940 像素时，问题就来了。

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

有什么建议么？

示例标记

4

1 回答 1

0

如果背景图像是一个选项，那么您可以将页面拆分为顶部和底部，然后将背景图像应用于这些容器。

您的 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;
}
于 2013-08-20T15:18:31.033 回答