滚动时如何制作固定蒙版

Question

我想在滚动时使元素像这样的图像一样蒙版，但是我尝试调整CSS -webkit-mask属性，但是它并没有按我想要的那样工作。

顶部：在顶部时，底部：在滚动时

如果您发现很难单独使用CSS来实现，那么还有另一种使用JS或jQuery来实现的方法吗？

Answer 1

为蒙版添加一个额外的图层，将蒙版钉在左上方，并让上下文在蒙版下方滚动。基于此，现在可以移动蒙版了。您需要一个隔离物来掩盖他未被面具遮盖的内容。只是一个想法。

  .mask{
    position:fixed;
    top : 0px;
    left: 0px;
    z-index:1000;
  }
  .content{
    position:relative;
    left:200px; /*mask width */
  }