我正在使用Bootstrap制作网页,从顶部的水平导航栏开始,然后是带有背景图像和一些文本的div。然后,在此封面之后放置各种容纳文本的容器。
我希望带有封面的div填充窗口上的剩余空间,即,当您加载页面时,您只会看到导航栏,其后是封面,直到滚动(如http://www.dagconseil.com/一样,但我的封面除外)与导航栏不重叠)。
到目前为止,如果我将相应的div(.home-cover)的位置设置为relative,则我得到的封面仅是文本标题的大小:
或覆盖整个页面直至结尾的图像(如果我使用绝对定位):
这也不是我想要的。
这是CSS的相关部分:
html {
position: relative;
min-height: 100%;
}
.navbar {
top: 0;
left: 0;
width: 100%;
}
.home-cover {
position:relative;
height:100%;
min-height:100%;
width:100%;
color: rgb(48,69,151);
}
.home-cover::before {
height:100%;
min-height:100%;
width:100%;
content: "";
background-position:center center;
z-index:0;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
-o-background-size: cover;
overflow:hidden;
background-image: url("img/home-cover.jpg");
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
.home-cover-header {
position: relative;
text-align: center;
width: 100%;
}
以及HTML页面的部分:
<nav class="navbar navbar-light navbar-expand-sm flex-nowrap">
<!-- nav bar content -->
</nav>
<div class="home-cover">
<div class="home-cover-header">
<h1>MY AWESOME AGENCY</h1>
<br><br><br><br>
<h2>BRAND CONTENT STRATEGY</h2>
</div>
</div>
<div class="container-large-padding container">
<!-- rest of the content -->
</div>
最佳答案
抱歉,如果我错过了您的行程,我已经更新了代码,我已经尝试过了,并且可以正常工作。 PS将.home-cover-header设为绝对。而不是图像本身(.home-cover)。现在试试这个HTML部分
<div class="home-cover">
</div>
<div class="home-cover-header">
<h1>MY AWESOME AGENCY</h1>
<br><br><br><br>
<h2>BRAND CONTENT STRATEGY</h2>
</div>
至于css,
.home-cover-header{
position:absolute;
top :10%;
}
.home-cover {
position:relative;
height:100%;
padding:25%;
min-height:100%;
width:100%;
color: rgb(48,69,151);
background-image: url("img/home-cover.jpg");
opacity: 0.8;
}
P.s请不要忘记提供填充,因为div本身是空的。