如何制作带有标签的圆形图像？

Question

我怎样才能制作出这样的图像，其中有一个标签。

谢谢。

我已经尝试过使用此 css 使图像变圆，但我无法制作像提供的图像这样的标签。

.img-circle {
    border-radius: 50%;
    width: 25%;
    height: 25%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}

<img src=".." class="img-circle" />

Answer 1

您可以在 inside 中使用一个元素img并添加:after伪元素，也可以使用 image 作为background

.el {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border: 2px solid red;
}
.el:after {
  content: '1';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: red;
  text-align: center;
  line-height: 30px;
  color: white;
}

<div class="el">
  <img src="http://placehold.it/100x100">
</div>