如何在图像上创建蒙版（不是剪辑路径，而是相反）

Question

我正在尝试对 div 应用蒙版，以便通过它看到背景图像。我所看到的一切都是关于剪辑路径的，但我正在寻找与此相反的东西。剪辑路径显示剪辑内部的内容。我试图让它成为一个面具，这样你就可以看到剪辑的外部。

Here is an example of what I am trying to achieve，下面是示例的完整描述。

我有一个带有背景图片的 div。在这个 div 内部是另一个 div，它覆盖了其父级的全部宽度和高度（带有背景图像），并且具有半透明 (rgba) 背景色。我正在尝试向此叠加 div（具有 rgba 背景颜色的那个）添加一个蒙版，以便从中间切出一个圆圈，显示没有颜色叠加的完整背景图像。

Here is a link to a jsfiddle 设置了我正在谈论的内容，但没有面具（因为我不知道该怎么做）。

<div class="backgroundImage">
  <div class="backgroundOverlayWithMask">
    <!-- content will be here -->
  </div>
</div>

.backgroundImage {
  width: 100%;
  height: 500px;
  background: url(https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg) no-repeat center center;
  background-size: cover
}

.backgroundOverlayWithMask {
  width: 100%;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.75);
}

Answer 1

我想我有一个使用box shadow、:after 和flex 的解决方案。 Fiddle。基于 web-tiki 的回答 here。

#inner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
#inner:after {
  content: '';
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.5);
  align-self: center;
}
#container {
  background: url('http://via.placeholder.com/800x200');
  background-size: cover;
}

<div id="container">
  <div id="inner">
  </div>
</div>