如何使用蚂蚁设计在 ReactJS 中将半圆形蒙版应用于图像并在图像内添加按钮？

【问题标题】：How to apply a half circle mask to an image and add a button inside an image in ReactJS using ant design?如何使用蚂蚁设计在 ReactJS 中将半圆形蒙版应用于图像并在图像内添加按钮？
【发布时间】：2019-10-29 06:29:44
【问题描述】：

我想为图像创建一个半圆形蒙版，并在此蒙版的中心有一个带有相机图标的按钮，但我正在努力寻找一种方法来做到这一点，我的方法是在照片的同一位置，然后将圆圈夹到下半部分。

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

我正在使用 ReactJs 和 ant Design。感谢您的宝贵时间。

【问题讨论】：

标签： html css reactjs antd

【解决方案1】：

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

.custom-avt {
  border-radius: 50%;
  position: relative;
  width:200px;
  height: 200px;
}

.overlay {
  position: absolute;
  top: 108px;
  width:200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}

  button {
    width:100px;
    height: 20px;
  }

<img src="https://www.w3schools.com/howto/img_avatar.png" class="custom-avt">
  <div class="overlay">
    <button>CAMERA</button>
  </div>
</img>

定期！

【讨论】：