我正在尝试创建一个包含不同部分的页面,第一部分显示菜单和背景图像,然后在其下有一个白色部分,其高度为500像素。
由于某种原因,我似乎无法很好地适应自己的形象。 现在,它甚至都没有显示图像,我也不确定为什么。
如何使图像适合屏幕,然后在其下方添加可以滚动到的白色部分?
* {
margin: 0;
padding: 0;
}
#firstSection {
background-image: url("https://i.imgur.com/xZjqUcR.png") no-repeat;
background-size: cover;
height: 700px;
}
#secondSection {
height: 500px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
<section id="nav-bar">
</section>
<section id="firstSection">
</section>
<section id="secondSection">
</section>
</body>
这是我要实现的目标,如果向下滚动,则应该有一个500px高的部分。