css – 如何使div bg图像适合全屏,并允许滚动下面的内容

我在过去的两天里一直在研究这个话题,尝试了250种不同的代码,我的智慧结束了,这就是我现在在这里的原因……我觉得我非常接近解决方案所以希望如此有人在这里可以把它放在边缘……我对CSS很新,所以如果我离开这里我很道歉…

我想要达到一个效果,你可以在stumbleupon.com的主页上查看.加载页面时,无论分辨率如何,bg图像都完全适合浏览器的可视区域. bg图像不固定,因此您可以向下滚动以查看更多内容.您可以在http://www.bakkenbaeck.no/上看到完全相同的效果…再次原始图像完全适合,并且不会修复下面的内容.

当我遇到StackOverflow问题并在这里回答Making a div fit the initial screen时,我以为我终于找到了答案

我按照那里的指示来到哦 – 如此接近……但没有雪茄.

您可以在www.konnect.co上查看我的测试域

我为这个bg图片输入的代码是

#wrapper-8 { 
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;

background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg)
no-repeat     center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
}

这会在我检查过的2个浏览器中完美显示图像.但是,bg图像与页面上第二个div的内容完全重叠.我创建了一个第二个div,给它一个bg颜色,并添加了一些内容进行测试,它隐藏在bg图像背后的div上面.如果您将浏览器的大小调整为较小的大小,则可以在bg图像变小时开始滚动.我在这里错过了bg图像div高度的东西吗？我已经尝试了几种高度选项,但无法改变任何东西.任何帮助将不胜感激.

解决方法

这是你的解决方案：

对两个类使用绝对定位并将其后面的内容放在顶部：100％！

.image {

      position: absolute;

      width: 100%;

      height: 100%;

      background-image: url(images/bg.jpg);

      background-size: cover;

      background-color: purple;

    }

    .content {

      position: absolute;

      top: 100%;

      width: 100%;

      height: 200px;

      background: yellow;

    }

<div class='image'></div>
<div class='content'>Here is Your solution!!! :-)</div>

原文地址：https://www.jb51.cc/css/215301.html