我希望你们中的一个能帮上忙。我有一个问题，通过谷歌搜索和检查我无法解决的论坛。
我想创建一个着陆页，其中包含一个高大的 bg 图片，该图片扩展到 100% 宽度并调整为浏览器窗口 + 内容的动态高度。所有内容都应位于浏览器窗口的边界下方，因此它只是浏览器首次加载时可以看到的图像，您向下滚动到位于扩展图像底部的内容。
我的 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% 浏览器高度，当您向下滚动时，附加内容位于白色 bg 之上，而不是图像的其余部分。我认为这是因为 #sectionOne 高度为 100%，但当我将其设置为高于 100% 时，它会将我的内容进一步向下推，但仍处于白色背景上。将 Background-Size 更改为 100% 也没有用。它的 react 与使用覆盖物相同。
有什么想法吗？有方便的 CSS 技巧吗？
如果这没有明确意义，我们深表歉意。提出您需要的任何问题，因为它很难描述。
最佳答案
对于这种情况，您需要使用定位。
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>预览
关于html - CSS - 如何创建超过 100% 且内容低于窗口的背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46810787/