Html CSS中的层掩蔽

我正试图达到类似的效果

---

我知道如何做背景图像和所有这些。但是蓝色的圆圈被认为是一个周围有层遮罩的图像，所以你可以看到背景图像。左边的灰色div正好在后面重叠。我不知道如何达到掩蔽效果，虽然我做了一些研究，但我很难说出什么是有用的，以获得效果，我试图实现。有人知道我该如何把它编码出来吗？

我猜是这样的

*{margin:0；padding:0；}
身体{
背景：url（'http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
}
p{填充：0 10px；字体大小：12px；颜色：#fff；行高：1.3；溢出：隐藏；}
.外部{
保证金：50px自动；
宽度：300px；
位置：相对位置；
}
.盒子{
位置：相对位置；
填充：20px0；
溢出：隐藏；
边界半径：10px；
}
.盒子：以前{
内容：''；
显示：块；
宽度：50px；
高度：50px；
左边距：-25px；
浮动：左；
边界半径：50px；
盒影：0 350px rgba（0,0,0,1）；
}
.外：以前{
内容：''；
位置：绝对位置；
宽度：40px；
高度：40px；
背景颜色：蓝色；
边界半径：20px；
位置：绝对位置；
顶部：25px；
左：-20px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本

类似的内容可能会让您开始：

HTML

<div id="container"> 
  <div id="gray-box" class="clip-circle"></div>
  <div id="blue-circle">&nbsp;</div>
</div>

---

为什么不将蓝色圆圈和灰色方框作为一张图片，中间的空间是透明的？凹面遮罩看起来很难处理。如果你能找到解决方法，剩下的就很简单了。你已经用SVG标记了这个问题。你反对在Illustrator中构建它吗@Vlad Bardalez如果这是一个自我项目，我可能会这样做，但我需要这个模板来完成最简单的工作-所以我交给别人的人也应该能够看到这个模板，在灰色框中输入文本，在蓝色框中输入图像。而不是打开一个程序，拍一张照片。（因为这些人不知道怎么做）。@isherwood我将其标记为SVG，因为它可能是解决方案的一部分。您是如何添加这样的代码段的？这是一个新功能吗？@iMoses我想它已经有半年的历史了，但可以称之为新功能。：）我已经有一段时间没有在这里回答问题了。不过，功能很酷，确实很方便。我只是想知道为什么Babkbone不是默认的库，淘汰是：）@drip这太接近了，我还需要在黑色div中的p标记中添加文本，这可能吗？它看起来不像是框阴影，但我可能错了。@smilefreak24现在还有文本。

.clip-circle {
  clip-path: circle(5px at 0px 15px);
}
#gray-box {
  border-radius: 15px;
  background-color: #AAA;
  width: 300px;
  height: 60px;
}
#blue-circle {
  position: absolute;
  left: 5px;
  top: 13px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: blue;
}