css border-radius用于裁剪偏心圆

Question

如何使用css border-radius从矩形图像中裁剪圆圈当圆圈不在图像的中心时？

格林是照片{w，h}。肖像w：h = 3：4。

红色是要显示的区域。圆心{x，y} =说{0.5w，0.3h}，原点在左上角。

Answer 1

这是通过裁剪背景图像并设置其位置来实现的一种方法。显然，这里有一些试验和错误可以让它排成一行，但希望你不需要以编程方式计算这样的东西。

请告诉我这是否有帮助！

＆＃13;

＆＃13;

.circle {
  background-image: url('https://i.stack.imgur.com/e0V1X.png');
  background-position: 48% 11.75%;
  border-radius: 50%;
  width: 120px;
  height: 120px;
}

＆＃13;

<div class="circle"></div>

＆＃13;

＆＃13;

＆＃13;