具有可滚动全尺寸图像的 CSS 定位

Question

我是新来的，希望有人能帮助我。

我看过这个网站，想知道是否有人可以帮助用 CSS 制作它。 我有一个标题，在一个包含内容的容器下面。我不明白的是如何告诉图像即使在调整窗口大小后也始终填满屏幕，以及如何告诉内容在您滚动时立即显示。

调整窗口的高度和宽度并滚动，看看我的意思。如果有任何帮助，我将不胜感激。

干杯和 TIA

Sample Page

Answer 1

首先，您需要将文档 (body) 的高度和宽度设置为视口(viewport) (html) 的高度，将两者设为 100% 并移除任何确保内容填充可见空间的边距。

然后，你需要创建你的第一个区域并给它一个 background-image 并使用 background-size:cover 和 background-position:center center ; 因此当您调整窗口大小时它会响应式调整大小。

任何后续的内容部分，也需要指定 100% 的高度和宽度，以便它们相对于可见区域进行缩放。

您可以使用例如以下:

Demo Fiddle

HTML

<header></header>
<section>Content</section>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
}
header {
    background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQOrSSvhefLVAXo3OOoMGYGS232bfHFnZyA9Jk24KeefYuau8c);
    background-size:cover;
    background-position:center center;
}
header, section {
    height:100%;
}
section {
    background:lightgrey
}