html - How to apply background to specific elements only?

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>