在 Skeleton CSS 框架中将背景图像和颜色拉伸到全宽答案

【问题标题】：Stretching background images & colors to full width in the Skeleton CSS framework在 Skeleton CSS 框架中将背景图像和颜色拉伸到全宽
【发布时间】：2017-02-11 05:26:32
【问题描述】：

我希望使用 Skeleton CSS Grid 创建在浏览器中完全伸展的背景（图像或颜色）？ http://getskeleton.com - 如果你下载 Skeleton，你会看到 Container 是一个 12 列的流体网格，最大宽度为 960px。因此，如果您想创建一个标题 div 并为其分配一个类以更改该背景图像，它将保留在 960 容器中。它不会占据浏览器的全宽。将标头移出 Container 以超过 960，您将打破网格。我希望内容保持在 960 网格内，但背景被拉伸到浏览器的边缘 - 有什么想法吗？

【问题讨论】：

使用 css 背景覆盖。

标签： html css

【解决方案1】：

有几种方法可以做到这一点，并且在不知道您的限制的情况下，我建议：在容器类之外创建一个额外的元素，您可以相应地对其进行样式设置。您可以为网站的每个部分使用一个容器，而不是使用单个整页容器，header>container | section>container | footer>container 等...

CSS
      .header {
        width: 100vw;
        height: 25vh;
        background-color: blue; }

HTML
      <div class="header">
        <div class="container">
          <div class="row">
            <div class="twelve columns"></div>
          </div>   
        </div>
      </div>

这是Skeleton Demo中使用的方法。看看Skeleton Demo source code，看看这个方法是怎么实现的。

【讨论】：

【解决方案2】：

使用绝对定位元素，您可以将背景塞入另一个元素中。由于主容器具有position: relative，因此您必须使用left: 50%; 和transform 将其居中。 top: 0 将使其忽略父级的填充，但如果您不希望背景延伸到填充中，则必须将其添加到元素中以匹配其父容器。 width: 100vw 将使其全宽，因为 vw 单位是相对于视口的。

position: absolute;
width: 100vw;
left: 50%;
top: 0;
transform: translateX(-50%);
background: red;
height: 100%;

【讨论】：