Cutting hole in DIV with background image [duplicate] - html

Question

Is there an elegant, some kind of an easy way to switch the circle's background with the div's background under them?
I want the circles to apply the div "one" image background, but the div "one" to be invisible(not the visibility:hidden ofc).
I don't need to hardcore the heck out of it, I want an elegant/sort of an easy way to make this.
IE10/11 support and above.
.one {
position: relative;
width: 500px;
height: 300px;
background-image: url("https://ak5.picdn.net/shutterstock/videos/11223065/thumb/1.jpg");
}
.two,
.three {
position: absolute;
top: 50%;
transform: translate(0%, -50%);
left: 15px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
}
.three {
left: initial;
right: 15px;
}
<div class="one">
<div class="two"></div>
<div class="three"></div>
</div>

Answer 1

I don't think there is an easy CSS solution for this but you can use SVG:
body {
background: linear-gradient(to right, blue, red)
}
<svg width="500" height="300">
<defs>
<!-- define the mask-->
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- the first hole -->
<circle r="50" cx="100" cy="150" fill="black"/>
<!-- the second hole -->
<circle r="50" cx="400" cy="150" fill="black"/>
</mask>
<!-- define the background image -->
<pattern id="img" patternUnits="userSpaceOnUse" width="500" height="300">
<image xlink:href="https://ak5.picdn.net/shutterstock/videos/11223065/thumb/1.jpg" x="0" y="0" width="500" height="300" />
</pattern>
</defs>
<!-- create a rect, fill it with the image and apply the above mask -->
<rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg>