我刚刚开始学习 HTML 和 CSS(以及一点 Bootstrap),我正在尝试制作一个简单的滚动网页。我的问题是我无法让 div 背景图像覆盖页面的整个高度——它只覆盖 h2 文本,就像它认为该元素的结尾是页面的结尾一样。我不知道它为什么会这样,而且我无法修复它。这真的难倒我,我敢肯定它有一个我错过的非常简单的解决方案。任何建议将不胜感激。
这是代码笔:
body {
background-color: rgb(255, 255, 255);
}
#front {
background: url("https://image.ibb.co/mjTmwv/port34.png") no-repeat;
overflow: hidden;
background-size: cover;
width: 100%;
height: 100%;
}
#h1 {
color: white;
font-size: 50px;
margin-top: 40vh;
padding: 10px;
background: rgba(43, 142, 255, 0.4);
}
#pt {
color: white;
font-size: 30px;
background: rgba(39, 220, 130, 0.4);
}
<ul style="z-index:9;">
<li>
<a class="active" href="#"><img class="img-fluid" style="width:auto;height:auto;max-height:26px;max-width:20px;" src="https://image.ibb.co/mg1s3a/lyreimage27.png" alt="website icon"></img> placeholder inc.</a>
</li>
<li><a href="#">About
</a>
</li>
<li><a style="text-decoration:none" href="#">Portfolio</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
<header>
<div id="front">
<div class="container-fluid">
<h1 id="h1" class="text-center">Placeholder</h1>
<h2 id="pt" class="text-center">Placeholder Text</h2>
</header>