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

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

，下面是该示例的完整说明

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

这设置了我所说的，但没有面具（因为我不知道如何做）

.背景图片{
宽度：100%；
高度：500px；
背景：url(https://upload.wikimedia.org/wikipedia/commons/4/47/New_york_times_square-terabass.jpg)无重复中心；
背景尺寸：封面
}
.背景覆盖带遮罩{
宽度：100%；
高度：500px；
背景色：rgba（0,0,0,0.75）；
}

我想我有一个解决方案，使用了

框影

，

：after

，和

flex

。基于web tiki的回答

#内部{
位置：相对位置；
宽度：100%；
高度：200px；
溢出：隐藏；
显示器：flex；
证明内容：中心；
}
#内部：之后{
内容：''；
边界半径：100%；
宽度：150px；
高度：150像素；
盒影：0px 0px 0px 2000px rgba（0,0,0,0.5）；
-webkit盒阴影：0px 0px 0px 2000px rgba（0,0,0,0.5）；
-moz盒阴影：0px 0px 0px 2000px rgba（0,0,0,0.5）；
自对准：居中；
}
#容器{
背景：url（'http://via.placeholder.com/800x200');
背景尺寸：封面；
}

我会创建一个位图图像遮罩，比如png或gif。我真的需要一个清晰响应的解决方案来解决这个问题，它可以在标准和视网膜屏幕上工作。如果我使用图像遮罩，在不同的屏幕尺寸下，遮罩的边缘会变得模糊/模糊。不管怎样，抱歉，没有标准的方法可以通过css实现你想要的。。。我也不认为一个清晰的高分辨率几何形状会太糟糕，fwiwI不是在寻找一个“只是css”的解决方案。这可以是css、javascript、svg或以上所有内容。我已经看到svg有一个标签，但我还没有找到一种方法让它工作。谢谢你！嗯，我想你可以在运行中生成一个带有画布的掩码，然后导出到一个数据/blob url，你可以用它为CSS提供信息。一个简单的循环应该很容易用W3傻瓜代码运行…哇，这太酷了。在Chrome中似乎工作正常，但在Safari中则不行。我将不得不研究如何在所有浏览器中实现这一点。谢谢@bluebomber检查一下我添加到safari答案中的webkit扩展。@lamelemon似乎仍然无法使用Safari@bluebombertbh我没有Mac或其他软件可以在Safari中测试。框阴影到底是在显示还是发生了什么事？@lamelemon我可以通过这样做在所有桌面浏览器上显示掩码：

-webkit外观：无-webkit盒阴影：0px 0px 0px 2000px rgba（0,0,0,0.75）-moz盒阴影：0px 0px 0px 2000px rgba（0,0,0,0.75）；盒子阴影：0px 0px 10px 2000px rgba（0,0,0,0.75）您将看到，我只在box shadow属性中添加了一个10px。现在，我只是无法让它在iOS中工作，但我正在研究它。
<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);
}