html - 具有垂直滚动的整页背景图像

Question

我正在尝试创建一个页面，其中背景图像响应您浏览器的屏幕尺寸。但是，我需要该图像下的内容，这样如果该人向下滚动，背景图像就会结束。

很难解释，所以我尝试创建一个图像以使其更清晰：

Answer 1

试试这个小提琴：

HTML：

<div class='image'></div>
<div class='content'>Content</div>

使用绝对定位，让背景图片和屏幕一样大，把内容放在后面，a topof 100%:

body { 
    margin:0;
}
.image {
    position:absolute;
    width:100%; 
    height:100%; 
    background:green;
    background-image:url('some-image.jpg');
    background-size:cover;
}
.content {
    position:absolute; 
    width:100%; 
    top:100%; 
    height: 100px;
}

Answer 2

position: absolute正如 tb11 所建议的那样，不需要。

您可以使用视口单位或通过设置 html、body 和 image 元素的高度来简单地设置视口的高度。

使用vh-演示和支持图表：

body { margin: 0; }
.image {
    width:100vw;
    height: 100vh; 
    background: green;
    background-image: url('some-image.jpg');
    background-size: cover;
}

---

如果不能使用vh，则必须设置 html 和 body 元素的高度，以便可以使用 percents - Demo：

html, body, .image { height: 100%; }
body { margin: 0; }
.image {
    width:100%;
    background: green;
    background-image: url('some-image.jpg');
    background-size: cover;
}