CSS：如何将图像放入底部被剪裁但顶部弹出的圆圈中？

【问题标题】：CSS: How to fit an image in a circle where bottom is clipped but top pops out?CSS：如何将图像放入底部被剪裁但顶部弹出的圆圈中？
【发布时间】：2017-08-12 02:49:24
【问题描述】：

我有一个父 div，它是一个用 CSS 完成的圆圈，而子 div 有一张头像的图像。我试图让头部与底部的圆圈对齐，但头部伸出圆圈的顶部边缘，类似于

圆圈也有与示例类似的边框。

我正在努力让它适合这样的圆圈形状。我尝试使用clip-path（我在圆形、椭圆和 svg 蒙版上尝试过）掩盖图像以产生这种错觉，但我不确定这是否是正确的轨道并让它匹配圆的边缘有点棘手。任何想法将不胜感激。

【问题讨论】：

标签： html css

【解决方案1】：

两个SPAN 元素。

父项是带边框的圆形，
内部的仅使底部边缘变圆。比玩保证金和background 属性...

.circle-face{
  display: inline-block;
  border: 4px solid #00B9D1;
  border-radius: 50%;
  width: 140px; 
  height: 140px;
  margin-top: 30px;                /* 30px forehead space */
}
.circle-face > *{
  display: inline-block;
  width: 140px;
  height: 170px;                   /* by 30px higher */
  margin-top: -30px;               /* and offset by 30px */
  background: none no-repeat center bottom / 170px;
  border-radius: 0 0 70px 70px;    /* 70 + 70 = 140px width */
  /* box-shadow: 0 0 0 4px red;    /* UNCOMMENT TO SEE THE TRICK */
}

<span class="circle-face">
  <span style="background-image:url(https://i.stack.imgur.com/bdZeE.png);"></span>
<span>

【讨论】：