如何将多个蒙版剪辑到一个固定背景？答案

【问题标题】：How to clip multiple masks to one single fixed background?如何将多个蒙版剪辑到一个固定背景？
【发布时间】：2021-07-16 20:09:09
【问题描述】：

我正在尝试设计一个 sn-p，其中我有多个元素，它们背后有一个共同的背景。两个圆圈具有不同的不透明度。他们可以移动以显示背景的不同部分。我被困住了，没有想法了。如何解决这个问题？

我正在尝试使结果看起来像这样。

【问题讨论】：

标签： html css sass

【解决方案1】：

用作背景的图片：

两个圆圈用作 SVG 蒙版。圆形的不同透明度是由复合蒙版组件的 Alpha 通道的不同透明度提供的。

.container {
width:75vw;
height:75vh;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 800 664" preserveAspectRatio="xMinYMin meet">  
<defs>
  <mask id="msk" > 
       <rect width="100%" height="100%" fill="black" /> 
     <circle fill="rgba(255,255,255,0.4)" cx="280" cy="300" r="150" />
      <circle fill="rgba(255,255,255,0.7)" cx="420" cy="300" r="120" />
  </mask>
</defs>    
  <rect width="100%" height="100%" fill="black" />
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/2WicJ.jpg" width="100%" height="100%" />
</svg>   
</div>

要使背景稍微可见，请添加到蒙版

<rect width="100%" height="100%" fill="#A96667" />

.container {
width:75vw;
height:75vh;
}

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 800 664" preserveAspectRatio="xMinYMin meet">  

<defs>
  <mask id="msk" > 
       <rect width="100%" height="100%" fill="#A96667" /> 
    <circle fill="rgba(255,255,255,0.5)" cx="280" cy="300" r="150" />
      <circle fill="rgba(255,255,255,0.6)" cx="420" cy="300" r="120" />
  </mask>
</defs>    
  <rect width="100%" height="100%" fill="black" />
<image mask="url(#msk)" xlink:href="https://i.stack.imgur.com/2WicJ.jpg" width="100%" height="100%" />
</svg>   
</div>

该应用程序响应迅速，在 Chrome、Firefox、Opera、MS Edge 中的工作方式相同。

【讨论】：

【解决方案2】：

面具是你需要的：

.box {
  position:fixed;
  inset:0;
  -webkit-mask:
    /*                 control the opacity --v              position / size */
    radial-gradient(farthest-side,rgba(0,0,0,0.5) 96%,#0000) 20% 50% / 300px 300px,
    radial-gradient(farthest-side,rgba(0,0,0,0.2) 96%,#0000) 70% 50% / 200px 200px,
    linear-gradient(#000 0 0);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  background:#000;
}


html {
  background:url(https://picsum.photos/id/1069/800/800) top/cover
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

感谢您的解决方案。 Firefox 没有组合圆圈的重叠部分。当两个元素重叠时，'mask-composite: exclude' 似乎没有给出预期的结果。然而，一切都在使用 WebKit 的浏览器上完美运行。
@AshutoshGulta 是的，我没有注意到，会尝试修复它
最后一个问题@Temani。如果我需要使用多个图像作为蒙版而不是渐变，我该怎么做？提前致谢。
@AshutoshGupta 您保持相同的结构，并将 radial-gradient() 替换为 url()
.box { position:fixed; inset:0; -webkit-mask: url(mask.png) 10% 20% / 100px , url(mask2.png) 40% 20% / 150px ; -webkit-mask-repeat:no-repeat; -webkit-mask-composite: destination-out; mask-composite: exclude; background:grey; } @TemaniAfif 我在这里做错了吗？另外，如何在图像中设置 alpha 值？

【解决方案3】：

分别为两个 div 设置相同的背景，并根据元素的位置移动元素的背景。

#container {
  background: #000;
  width: 600px;
  height: 500px;
  position: relative;
  overflow: hidden;
}
.window {
  background: url(https://images.unsplash.com/photo-1624558481209-0e23e79e3872?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYyNTg0OTY4NQ&ixlib=rb-1.2.1&q=80&w=1080) no-repeat;
  position: absolute;
  top: 0;
}
.one {
  width: 180px;
  height: 180px;
  border-radius: 100%;
  left: 250px;
  top: 140px;
  background-position: -250px -140px;
  opacity: 0.7;
}

.two {
  width: 280px;
  height: 280px;
  border-radius: 100%;
  left: 80px;
  top: 80px;
  background-position: -80px -80px;
  opacity: 0.7;
}

<div id="container">
  <div class="window one"></div>
  <div class="window two"></div>
</div>

【讨论】：