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

Question

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

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

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

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>