CSS：如何在底部被剪裁但顶部弹出的圆圈中拟合图像？ [英] CSS: How to fit an image in a circle where bottom is clipped but top pops out?

问题描述

我有一个父div，它是用CSS绘制的圆，孩子有头像。我试图使头部与底部的圆圈对齐，但头部伸出圆圈的顶部边缘，类似于

I have a parent div that is a circle done in CSS and the child has an image of a headshot. I'm trying to get the head to align with the circle at the bottom but the head extends out of the top edge of the circle, similar to

圆也具有类似于示例的边框。

The circle also has a border similar to the example.

I努力使它适合那样的圆圈形状。我试过使用 clip-path （我在圆形，椭圆形和svg蒙版上尝试过）来遮盖图像以产生幻觉，但我不是确保这是正确的路线，并使其与圆的边缘匹配会有些棘手。任何想法都会受到赞赏。

I'm struggling to get it to fit the shape of the circle like that. I've tried using clip-path (I've tried it on a circle, ellipse, and svg mask) that masks the image to give that illusion but I'm not sure if this is the right track and getting it to match the circle's edges is kind of tricky. Any ideas would be appreciated.

推荐答案

两个 SPAN 元素。

父级是带边框的圆形，

，而内级只是倒圆了底边。比起使用保证金和 background 属性...

The parent one is round with a border,
and the inner one has only rounded the bottom edge. Than playing with margin and the background properties...

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

这篇关于CSS：如何在底部被剪裁但顶部弹出的圆圈中拟合图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！