Question

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

我想创建一个具有高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％时，它会将我的内容进一步向下推，但仍然是白色的bg。将背景大小更改为100％也不起作用。它与使用封面的反应相同。

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

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

Answer 1

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

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

FlexBox示例

＆＃13;

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

＆＃13;

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

＆＃13;

预览

CSS - 如何使用窗口下方的内容创建超过100％的bg图像

1 个答案: