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

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

您可以在img内使用一个元素并添加:after伪元素，也可以将图片用作background

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以创建包含图像和标签的包装器，如下所示： https://jsfiddle.net/9e7h2LLf/

.wrapper{
  border-radius: 50%;
  border: 2px solid red;
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: absolute;
}

img {
  height: 100px;
  width: 100px;
}

.label {
  background-color: red;
  height: 30px;
  line-height: 30px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  color: white;
  text-align: center;
}

<div class="wrapper">
  <img src="https://image.freepik.com/free-vector/bathroom-mosaic-pattern_23-2147497370.jpg">
  <span class="label">1</span>
</div>

或创建一个圆形包装并使用图像作为背景，如下所示： https://jsfiddle.net/3jmfcudo/

.wrapper{
  border-radius: 50%;
  border: 2px solid red;
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-image: url("https://image.freepik.com/free-vector/bathroom-mosaic-pattern_23-2147497370.jpg");
  background-size: contain;
  position: absolute;
}

.label {
  background-color: red;
  height: 30px;
  line-height: 30px;
  width: 100%;
  position: absolute;
  bottom: 0px;
  color: white;
  text-align: center;
}

<div class="wrapper">
<span class="label">1</span>
</div>