如何在此页面上创建相同的背景效果？

Question

点击链接：enter link description here

谢谢！

Answer 1

使用Pseudo-Element linear-gradient在父容器之后添加:after，从底部开始，100％，淡出0％。

检查以下代码：

body {
  margin: 0;
  padding: 0;
}

.main {
  background-image: url(https://picsum.photos/1280/1000?image=1080);
  background-size: cover;
  background-position: center center;
  height: 100vh;
  position: relative;
  height: 100vh;
  width: 100wh;
  overflow: hidden;
}

.effect {
  width: 100wh;
  height: 100vh;
}

.effect:after {
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%);
  margin-top: -100vh;
  height: 100vh;
  width: 100wh;
  content: "";
}

<div class="effect">
  <div class="main">
  </div>
</div>