Can I use an image as a mask?

Question

Can I make a regular image to mask element lying beneath it? For example I want a div element with background image with hole inside it, which will hide all elements which lying beneath it, except elements beneath the hole. Found the following example https://stackoverflow.com/a/8286622/947111 how to do this with plain color, but I doubt is it possible to replace black color by image?

P.S. Of course solution should work while page being resized.

body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background: -moz-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -webkit-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -ms-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  background: -o-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
  pointer-events: none; /* send mouse events beneath this layer */
}

<p class="underneath">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="overlay"></div>

Answer 1

I'm actually surprised, but I got it working with mask-image which is quite widely supported. There are a few gotchas but one of the most interesting things I'm doing is creating a black to black image gradient as part of the composition instead of a second image. Thus, in the end, this solution uses only 1 image, that of a white png circle.

Besides your own set pixel sizes, all of mine use percentages to maintain responsiveness.

body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background: #000;
  mask-image: linear-gradient(black 0%, black 100%), url(http://www.iconsdb.com/icons/preview/white/circle-xxl.png);
  mask-repeat: no-repeat, no-repeat;
  mask-position: center center, center center;
  mask-composite: source-out;
  mask-size: 100%, 60%;
  -webkit-mask-image: linear-gradient(black 0%, black 100%), url(http://www.iconsdb.com/icons/preview/white/circle-xxl.png);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center center, center center;
  -webkit-mask-composite: source-out;
  -webkit-mask-size: 100%, 60%;
  pointer-events: none; /* send mouse events beneath this layer */
}

<p class="underneath">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="overlay"></div>

Answer 2

body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background-image: url(http://seanrawles.work/test/Aerial_view_Sausalito-example.png);
  background-repeat:no-repeat;
  background-position:center;
  pointer-events: none; /* send mouse events beneath this layer */
}

<p class="underneath">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="overlay"></div>

Well it seems to work.

Answer 3

Image is a bit big but here you go. Just use a transparent PNG with transparency where you want your hole. then set the background to an image rather than a radial gradient.

body {
  margin: 0;
  padding: 0;
}

.underneath {
  padding: 0;
  margin: 265px 0 0 0;
  width: 600px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 600px;
  height: 600px;
  background: url('http://www.genericorp.net/~vostek/images/circlemask-1024x768.png');
  background-size: 600px 600px;
  background-repeat: no-repeat;
  pointer-events: none; /* send mouse events beneath this layer */
}

<p class="underneath">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div class="overlay"></div>