【问题标题】: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%;
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-05-18
      • 1970-01-01
      • 2012-09-02
      • 1970-01-01
      • 2018-04-09
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多