创建带有文本的圆形图像

Question

我想创建一个带有文字的圆形图片，如图片，我在下面上传

但是我创建了一个圆形图像，在正确的图像后显示这样的文字

.circles {
  margin: auto;
  height: 73px;
  width: 130px;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-color: black;
  opacity: 50%;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  margin-top: -169px;
}

.tit {
  color: white
}

<div className="circle">
  <img src={imageupload} className="cirimage" />

</div>
<div className="circles">
  <p className="tit">Title</p>
</div>

Answer 1

.round {
  background: #fff;
  border: 2px solid #000;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  overflow: hidden;
}
.text {
  background-color: black;
  opacity: 50%;
  color: #fff;
  padding: 10px;
  text-align: center;
  z-index: 999;
  position: relative;
}
.image {
  background-color: #e6baba;
  height: 100px;
  width: 100px;
  position: relative;
  top: -38px;
  z-index: 9;
}

   

 <div class="round">
  <div class="text">
    Text
  </div>
  <div class="image">
    Add Image Here
  </div>
</div>

Answer 2

更新您的 CSS 文件

.text-container {
  background-color: black;
  opacity: 50%;
  padding: 10px;
  text-align: center;
  z-index: 999;
  color: #fff;
  position: relative;
}
.image-container {
  background-color: #e6baba;
  height: 100px;
  width: 100px;
  z-index: 9;
  position: relative;
  top: -38px;
  
}
.circle-container {
  background: #fff;
  border: 2px solid #000;
  height: 100px;
  width: 100px;
  overflow: hidden;
  border-radius: 50px;
}

使用 HTML 如下

 <div class="circle-container">
  <div class="image-container">
    Add Image Here
  </div>
 <div class="text-container">
    Text
  </div>
</div>