我可以使用图像作为面具吗？

Question

我可以制作一个常规图像来掩盖位于它下面的元素吗？例如，我想要一个div元素，背景图像中有一个洞，它将隐藏位于其下方的所有元素，除了洞下面的元素。找到以下示例https://stackoverflow.com/a/8286622/947111如何使用纯色执行此操作，但我怀疑是否可以通过图像替换黑色？

P.S。当然，在调整页面大小时，解决方案应该可以正常工作。

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

图像有点大但是你走了。只需使用透明的PNG，透明度，你想要你的洞。然后将背景设置为图像而不是径向渐变。

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

好吧它好像有效。

Answer 3

我实际上感到很惊讶，但我使用了mask-image quite widely supported。有一些陷阱，但我正在做的最有趣的事情之一就是创建一个黑色到黑色的图像渐变作为构图的一部分而不是第二个图像。因此，最后，此解决方案仅使用1个图像，即白色png圆的图像。

除了您自己设置的像素大小外，我的所有使用百分比都能保持响应能力。

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;