整页背景图像与垂直滚动

Question

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

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

Answer 1

试试这个小提琴:

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