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

Posted 2023-03-23

【中文标题】css中的单个固定位置剪切区域仅影响图像

【英文标题】：Single, fixed position clipping region in css affecting only images

【发布时间】：2019-01-18 00:00:21

【问题描述】：

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

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

我怎样才能做到这一点？

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

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


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

<div class="site">

  <svg id="mask" view-box="0 0 800 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 之外的其他解决方案。 提前感谢您的任何建议！

【参考方案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>

【讨论】：

如果我需要比圆形更复杂的形状怎么办？

@NicolaScapin 在这种情况下，您可以将剪辑路径与我创建的固定元素一起使用；）bennettfeely.com/clippy