CSS - 如何在窗口下方创建超过 100% 的 bg 图像答案

【问题标题】：CSS - How to create a bg image over 100% with content below windowCSS - 如何在窗口下方创建超过 100% 的 bg 图像
【发布时间】：2017-10-18 21:15:35
【问题描述】：

我希望你们中的一个可以提供帮助。我有一个问题，通过谷歌搜索和检查我无法解决的论坛。

我想创建一个登录页面，该页面具有一个延伸到 100% 宽度的高 bg 图像，并根据浏览器窗口 + 内容的动态高度进行调整。所有内容都应该在浏览器窗口的边界之下，因此它只是在浏览器第一次加载时可以看到的图像，并且您向下滚动到位于扩展图像底部的内容。

我的 HTML 当前是：

<body>
    <section id="sectionOne">
        <div id="sectionOneLanding"></div>
        <div id="sectionOneContent">CONTENT TO SIT HERE</div>
    </section>
</body>

我的 CSS 目前是：

html,
body {
    height:100%;
    width:100%;
}

#sectionOne {
    height:100%;
    background-image: url(../images/cliff.jpg);
    background-size: cover;
}

#sectionOneLanding {
    height:100%;
    width:100%;
}

目前，图像裁剪到 100% 浏览器高度，当您向下滚动时，附加内容位于白色背景上，而不是图像的其余部分。我相信这是因为#sectionOne 高度为 100%，但是当我将其设置为高于 100% 时，它会将我的内容进一步向下推，但仍然在白色背景上。将 Background-Size 更改为 100% 也不起作用。它的反应与使用掩护相同。

有什么想法吗？有没有方便的 CSS 技巧？

抱歉，如果这没有明确的意义。提出您需要的任何问题，因为它很难描述。

【问题讨论】：

见Creating a fullscreen hero DIV for your site header
这正是我想要的。非常感谢。您可以将其放入下面的答案中以便我批准吗？

标签： html image css

【解决方案1】：

这种情况你需要使用定位。

html, body {
  height: 100%;
  margin: 0;
}
#sectionOne {
  position: relative;
  height: 100%;
  background-image: url(../images/cliff.jpg);
  background-size: cover;
  background-color: #99f;
}

#sectionOneLanding {
  height:100%;
  width:100%;
}

<section id="sectionOne">
  <div id="sectionOneLanding"></div>
  <div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>

您不需要width: 100%。但是您需要margin: 0;，因为有默认边距。我添加了背景颜色，以便您可以清楚地看到背景完全跨越，将内容留在下一页。

如果您需要图像和内容在同一页面中，则需要使用 Flex Box。

FlexBox 示例

body, html {
  height: 100%;
  margin: 0;
}
#sectionOne {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#sectionOneLanding {
  background-color: #99f;
  flex: 1;
}

<section id="sectionOne">
  <div id="sectionOneLanding"></div>
  <div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>

预览

【讨论】：

你如何在它下面的内容后面制作紫色？
@EamonYates 哪个紫色？我使用了背景色。