Question

我希望在浏览器中使用Skeleton CSS Grid创建完整的背景（图像或颜色）？ http://getskeleton.com - 如果您下载Skeleton，您将看到Container是一个12列流体网格，最大宽度为960px。因此，如果您想创建一个标题div并为其指定一个类来更改该背景图像，它将保留在960容器中。它不会超出浏览器的全宽。在集装箱外面的标题超过960＆amp;你会打破网格。我希望内容保持在960网格内，但背景被延伸到浏览器的边缘 - 任何想法？

Answer 1

使用绝对定位元素，您可以将背景插入另一个元素。由于主容器具有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%;

Answer 2

有几种方法可以做到这一点，在不知道你的限制的情况下，我会建议：在容器类之外创建一个额外的元素，你可以相应地设置样式。您可以为网站的每个部分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>

{{1}}

这是Skeleton Demo中使用的方法。看一下Skeleton Demo source code，看看这个方法是如何实现的。

拉伸背景图像＆amp; Skeleton CSS框架中的颜色到全宽

2 个答案: