img-circle，图标题也是圆圈

Question

我想将播放器配置文件添加到我正在创建的网站中。我希望让玩家处于图像右下角的cirlce图像和数字中。如此（对不起质量）

What I would like

到目前为止，这是我的小提琴：

<figure class="profile">
  <img src="http://lorempixel.com/140/140" class="img-circle" />
  <figcaption>12</figcaption>
</figure>

https://jsfiddle.net/78wzcydL/

Answer 1

你需要绝对定位标题：

figure {
  position: relative;
  width: 140px;
  height: 140px;
}


figcaption {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: gray;
  border-radius: 100%;
}

Check the sample here

Answer 2

"10111101".substr(0, 4) + "0000";

body {
  margin: 10px;
}
.profile {
  position: relative;
  display: inline-block;
  z-index: 10;
}
figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  background: tomato;
  color: #fff;
  text-align: center;
  line-height: 50px;
  z-index: 20;
}