如何用两个 div 制作一个 photoshop 风格的剪贴蒙版

Question

我有 this 代码，我想让 .clip 框为 .ml 创建剪贴蒙版效果，以便 50vh 以上的行部分是黑色的，并且当用户滚动该行时好像变黑了。

.clip{
    position: fixed;
    z-index: 9999;
    top: 0;
    width: 100%;
    height: 50vh;
    background-color: #414141;
    clip: auto;
}

Answer 1

也许有背景附件：已修复？

.dualbg {
  height:100vh;
  background:linear-gradient(to top, #333,#333) no-repeat rgba(0,0,0,0.3);
  background-size:100% 50%;
  width:3px;
  margin:50vh auto 0;
  background-attachment:fixed;

<div class="dualbg"></div>

如何用两个 div 制作一个 photoshop 风格的剪贴蒙版

How to make a photoshop style clipping mask with two divs

html

css

mask

clipping