html - CSS 中的图层 mask

Question

我正在尝试实现与此类似的效果

我知道如何制作背景图片等等。但是蓝色圆圈应该是周围有图层蒙版的图像，因此您可以看到背景图像。左边的灰色 div 会重叠在它后面。虽然我不确定如何实现遮蔽效果，但我已经对其进行了一些研究 here ，但我很难说出什么对我想要达到的效果有用。任何人对我如何将其编码出来有任何想法？

Answer 1

我猜是这样的。

* { margin:0; padding: 0; }
body {
  background: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
}
p { padding: 0 10px; font-size: 12px; color:#fff; line-height: 1.3; overflow: hidden; }
.outer {
  margin: 50px auto;
  width: 300px;
  position: relative;
}
.box {
  position: relative;
  padding: 20px 0;
  overflow: hidden;
  border-radius: 10px;
}
.box:before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  float: left;
  border-radius: 50px;
  box-shadow: 0 0 0 350px rgba(0, 0, 0, 1);
}
.outer:before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: blue;
  border-radius: 20px;
  position: absolute;
  top: 25px;
  left: -20px;
}

<div class="outer">
  <div class="box"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
</div>