您如何在此页面上创建相同的背景效果？ [关闭]

【问题标题】：How do you create this same background effect on this page? [closed]您如何在此页面上创建相同的背景效果？ [关闭]
【发布时间】：2018-04-05 22:03:29
【问题描述】：

点击链接：enter link description here

谢谢！

【问题讨论】：

检查，复制/粘贴，它只是背景大小的封面，位置在顶部中心，检查并查看
你也有主题开发者的名字..如果你不能检查代码，你也可以写信给他

标签： html css

【解决方案1】：

使用伪元素:after在父容器之后添加linear-gradient，从底部开始，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>

【讨论】：