如何根据图像形状裁剪背景？

Question

如何实现上述图像。下面的灰色块在中间被裁剪为半圆以容纳图像。我应该使用CSS动画或其他任何东西来获得这种效果吗？这样可以根据图像形状裁剪下面元素的背景。

Answer 1

将position:absolute;用于图片图标并将其放在两个div之间，而不是裁剪，您可以提供background:#fff和填充，使其看起来像这样。

请参阅下面的代码：

.main{
  position:relative;
  height: auto;
}
.upper {
  background: #eee;
  height: 100px;
}

.lower {
  background: #ccc;
  height: 100px;
}

img.icon {
  position: absolute;
  top: 40%;
  left:50%;
  background: #fff;
  border-radius:50%;
  padding:2px;
}

<div class="main">
  <div class="upper"></div>
  <img class="icon" src="https://cdn2.iconfinder.com/data/icons/web-and-mobile-ui-volume-24/48/1200-512.png" width="50" />
  <div class="lower"></div>
</div>

JsFiddle：https://jsfiddle.net/75euot8d/1/