css - 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 的想法:

.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>