到达顶部标题时淡出的内容淡出

Question

我正在尝试通过-webkit-gradient创建一个渐变PNG，以使幻想说内容在滚动时逐渐删除，以使内容不在标题后面。

这是我尝试的：

.wrapper {
  background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
  background-attachment: fixed;
}
.menu {
  position: fixed;
  width: 100%;
  z-index: 98;
  height: 80px;
}
.gradient-png {
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  height: 80px;
}
.hamburger {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 50px;
}
.site-logo {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 170px;
}
.content {
  padding-top: 100px;
}

      <div class="wrapper">
        <div class="menu gradient-png">
          <img class="hamburger" alt="menu" />
          <div class="site-logo">Logo</div>
        </div>
        <div class="content">
          <p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p>
        </div>
      </div>

不知何故，掩模图像没有生效，我仍然可以看到我的内容在菜单后面。

我正在尝试实现这样的目标，其中以下文本是内容：

Answer 1

mask-image旨在与同一元素上的背景图像结合使用。我已经在下面的演示中添加了该图像，并清理了mask-image语法。 （并进行了较小的修改以清理外观。）所有更改均在CSS中使用/*** ***/进行评论。

更新：更改了设置背景图像的方式。

参考：

• bask-image>
• https://developer.mozilla.org/en-us/docs/web/css/gradient/linear-gradient/linear-gradient“ rel =“ nofollow noreferrer”> linearear-gradient（）
• css variables

:root {
  --background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"); /*** added ***/
}
body {
  margin:0; /*** optional addition ***/
}
.wrapper {
  background-image: var(--background-image); /*** modified ***/
  background-attachment: fixed;
}
.menu {
  position: fixed;
  width: 100%;
  z-index: 98;
  height: 80px;
}
.gradient-png {
  mask-image: linear-gradient(white 75%, transparent); /*** added; non-chrome ***/
  -webkit-mask-image: linear-gradient(white 75%, transparent); /*** corrected; chrome ***/
  background-image: var(--background-image); /*** added ***/
  height: 90px; /*** optional modification ***/
}
.hamburger {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 50px;
}
.site-logo {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 170px;
}
.content {
  padding-top: 100px;
}

<div class="wrapper">
  <div class="menu gradient-png">
    <img class="hamburger" alt="menu" />
    <div class="site-logo">Logo</div>
  </div>
  <div class="content">
    <p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p><p>Example content</p>
  </div>
</div>