css中的单个固定位置剪切区域仅影响图像

Question

我需要一个固定位置的剪辑区域（或全屏蒙版），它只会影响我页面中的图像。

想象一下屏幕中心的圆形剪辑路径。我需要图像仅在此剪切区域内滚动时部分可见。

我怎样才能做到这一点？

这是我迄今为止尝试过的：

#mask {
  left 0;
  position: fixed;
  top: 0;
}

.test {
    clip-path: url(#clipRegion);
}

<div class="site">

  <svg id="mask" view-box="0 0 800 600" width="800" height="600">
    <defs>
      <clipPath id="clipRegion">
        <circle cx="400" cy="300" r="100" />
      </clipPath>
    </defs>
  </svg>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum, dui ac pellentesque volutpat, nisi dui interdum metus, vitae pellentesque tortor sem sit amet nisl. Pellentesque commodo arcu et eleifend efficitur. Nunc id tempus enim. Suspendisse mi lectus, faucibus non bibendum a, dapibus sed leo.</p>
  
  <img class="clip" src="https://picsum.photos/400/900?image=1069">
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum, dui ac pellentesque volutpat, nisi dui interdum metus, vitae pellentesque tortor sem sit amet nisl. Pellentesque commodo arcu et eleifend efficitur. Nunc id tempus enim. Suspendisse mi lectus, faucibus non bibendum a, dapibus sed leo.</p>
  
  <img class="clip" src="https://picsum.photos/900/500?image=1059">

</div>

赞赏除 svg 之外的其他解决方案。 提前感谢您的任何建议！

Answer 1

我认为您需要创建一个覆盖所有屏幕的图层，然后使用 z-index 将所有图像放在其后面，并将其他元素保留在上面。

这里有一个简单的 div 并且没有任何复杂的 SVG 或掩码的想法：

.mask {
  left 0;
  top: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  background: radial-gradient(circle at center, transparent 40%, #fff 40.5%);
  z-index: -1;
}

p,
img {
  position: relative;
}

.clip {
  z-index: -2;
}

body {
  margin: 0;
}

<div class="site">
  <div class="mask"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum, dui ac pellentesque volutpat, nisi dui interdum metus, vitae pellentesque tortor sem sit amet nisl. Pellentesque commodo arcu et eleifend efficitur. Nunc id tempus enim. Suspendisse
    mi lectus, faucibus non bibendum a, dapibus sed leo.</p>

  <img class="clip" src="https://picsum.photos/600/700?image=1069">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum, dui ac pellentesque volutpat, nisi dui interdum metus, vitae pellentesque tortor sem sit amet nisl. Pellentesque commodo arcu et eleifend efficitur. Nunc id tempus enim. Suspendisse
    mi lectus, faucibus non bibendum a, dapibus sed leo.</p>

  <img class="clip" src="https://picsum.photos/900/500?image=1059">

</div>