Question

有人可以解释一下如何创建在此网站上看到的效果，其中内容的不透明度变为朦胧的白色，因为它越来越靠近视口的顶部？我已查看过代码，但无法自行获得所需的效果。 http://www.sylvainreucherand.fr/

Answer 1

您可以按如下方式创建效果。如果您有任何问题，请告诉我。

HTML：

<body>
  <div class="haze-effect">
</body>

CSS：

body {
  position: relative;
}

.haze-effect {
  left: 0;
  top: 0;
  position: fixed;
  height: 300px;
  width: 100%

  background: -webkit-linear-gradient(#fff,hsla(0,0%,100%,0));
  background: linear-gradient(#fff,hsla(0,0%,100%,0));
}

带标题的不透明效果内容

1 个答案: