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中的单个固定位置剪切区域仅影响图像

1 个答案: