CSS中的图层遮罩

Question

我正在尝试实现类似于以下效果：

我知道如何设置背景图片等。但是蓝色圆圈应该是一个带有图层蒙版的图像，因此您可以看到背景图像。左侧的灰色div将只是在其后面重叠。我不确定如何实现遮罩效果，我已经进行了一些研究这里，但是我很难判断哪些内容对于我想要实现的效果有用。有人有任何想法吗？我该如何编写代码来实现这个效果？

- smilefreak24

---

为什么不将蓝色圆圈和灰色框作为一张图片，它们之间的空间是透明的呢？ - user4765675

凹面遮罩似乎是一个棘手的问题。如果你能找到一个如何做的教程，剩下的就很容易了。 - isherwood

你已经使用SVG标签标记了这个问题。你反对在Illustrator中构建它吗？https://css-tricks.com/using-svg - isherwood

@Vlad Bardalez 如果这是一个自己的项目，我可能会这样做，但我需要这个模板尽可能地简单-这样我交给别人时，他们应该能够查看这个模板并在灰色框中输入文本，在蓝色框中插入图像。而不是必须打开程序并制作图片（因为这些人不知道如何做到这一点）。 - smilefreak24

@isherwood 我将其标记为SVG，因为它可能是解决方案的一部分。 - smilefreak24

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>

- drip

---

你是怎么添加那段代码片段的？那是一个新功能吗？ - iMoses

@iMoses 我想它已经半年了，但可能被称为新的。 :) - drip

嗯，我好久没在这里回答问题了。尽管如此，这个功能非常酷，确实很方便。我只是想知道为什么 Backbone 不是默认库，而 Knockout 是 :) - iMoses

@drip 这非常接近，不过我还需要将文本放在黑色 div 内的 p 标签中，这可能吗？根据盒子阴影的外观，似乎不可能，但我可能错了。 - smilefreak24

@smilefreak24，现在也有文本了。 - drip

Answer 2

像这样的代码可以让你开始入门：

HTML

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

CSS

.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;
}

http://codepen.io/anon/pen/dobbwQ

- danyim