与垂直滚动的全页背景图象 [英] Full page background image with vertical scrolling

问题描述

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

I'm trying to create a page where the background image is responsive to your browser's screen size. However, I need content under that image such that if the person scrolls down, the background image ends.

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

It's hard to explain so I've tried to create an image to make it clearer:

推荐答案

试试这个小提琴：

HTML：

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

使用绝对定位使背景图像与屏幕大小相同，与顶部的 100％：

Use absolute positioning to make the background image the same size as the screen, and put the content after, with a top of 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;
}

这篇关于与垂直滚动的全页背景图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！