整页背景图像与垂直滚动

Question

我正在尝试创建一个页面，其中背景图像响应浏览器的屏幕大小。但是，我需要在该图像下的内容，以便如果该人向下滚动，则背景图像结束。

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

Answer 1

试试这个Fiddle：

HTML：

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

使用绝对定位使背景图像与屏幕尺寸相同，然后将内容放在top 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，正文和图像元素的高度来设置视口的高度。

使用vh - Demo和support chart：

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

如果你不能使用vh，那么你也必须设置html和body元素的高度，以便你可以使用百分比 - Demo：

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