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>

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

Single, fixed position clipping region in css affecting only images

css

svg

canvas

clipping

masking