How to clip multiple masks to one single fixed background?

user_14362086 0
Viewed 127

I'm trying to design a snippet where I have multiple elements reveling one common background behind them. Both circles have different opacity. They can move to show different parts of background. I'm stuck and running out of ideas. How to approach this?

I'm trying to make the result look like this.

sass css html
3 Answers

mask is what you need:

.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
}
<div class="box"></div>

user_86203330

Image used as background:

enter image description here

Two circles are used as an SVG mask. Different transparency of the circles is provided by the different transparency of the alpha channel for the components of the composite mask.

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

To make the background a little visible, add to the 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="https://i.stack.imgur.com/2WicJ.jpg" width="100%" height="100%" />
</svg>   
</div>

The app is responsive and works the same in Chrome, Firefox, Opera, MS Edge.

user_73948710

Setting same background for both divs seperately and moving background of elements according to their position.

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

user_143620860
Related