Question

我想创建一个网站，在它加载时会显示全屏图像，而当您向下滚动时，它会显示白色背景，其中包含我的所有关于和联系信息。我该怎么做？我制作了一个名为“ top-background”的div，其中包括图像的来源，并且在我使用的CSS中

z-index: -100;
height: 30%;
width: 100%;
top: 0%;

但是它不能全屏显示，也不能执行我想要的操作。

Answer 1

您可以按照以下步骤进行操作

body {
  margin: 0;
}

.bgone {
    position:absolute;
    width: 100%; 
    height: 100%; 
    background: blue;
    background-image: url('yourimagehere.png');
    background-size: cover;
    color: white;
}

.bgtwo {
  position: absolute;
  width: 100%;
  top: 100%;
  height: 100px;
}

<div class='bgone'>On page load content</div>
<div class='bgtwo'>Scrolled content</div>

Answer 2

您可以通过创建两个div并将其高度100vh设置为代表视图高度的100％来实现。

.background-1 {
  background: blue;
  height: 100vh;
}

.background-2 {
  background: white;
  height: 100vh;
}

<div class="background-1"></div>
<div class="background-2"></div>

如何在HTML中添加2个单独的背景？

2 个答案: