Html 如何使用ant design在ReactJS中将半圆遮罩应用于图像并在图像中添加按钮？

我想为一幅图像创建一个半圆遮罩，并在该遮罩的中心有一个带有摄像头图标的按钮，但我正在努力找到一种方法，我的方法是在照片的同一位置创建一个圆图像，然后将圆剪辑到下半部分

有人能给我建议一个更好的方法吗？以及如何在图像中放置按钮

我正在使用ReactJs和ant设计。谢谢你抽出时间

---

您可以创建一个覆盖层，将其设置为半圆形，然后将其固定在绝对位置 这是我的exmaple代码

。自定义avt{
边界半径：50%；
位置：相对位置；
宽度：200px；
高度：200px；
}
.覆盖{
位置：绝对位置；
顶部：108px；
宽度：200px；
高度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：rgba（0,0,0,0.5）；
边框左下半径：100px；
边框右下半径：100px；
}
钮扣{
宽度：100px；
高度：20px；
}

摄像机