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

Question

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

我试图让结果看起来像这样。

Answer 1

用作背景的图像:

两个圆圈用作 SVG mask 。圆圈的不同透明度由复合蒙版组件的 alpha channel 的不同透明度提供。

.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="/image/2WicJ.jpg" width="100%" height="100%" />
</svg>   
</div>

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

<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="/image/2WicJ.jpg" width="100%" height="100%" />
</svg>   
</div>

该应用具有响应能力，并且在 Chrome、Firefox、Opera、MS Edge 中的运行方式相同。