html - 圆形照片上的小覆盖

Question

您好，我在个人网站上工作，我想要一张圆形照片，底部填充约 10%，我可以在上面放一些文字。 Here is picture to better describe what I want如果有人能给我指点教程或告诉我如何执行此操作，那就太好了。

Answer 1

.img-container {
  border-radius: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 200px;
}

.img-container > .caption {
  background-color: #ff0000;
  bottom: 0;
  color: #fff;
  height: 50px;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 123;
}
.img-container > img {
  max-height: 100%;
  width:auto;
}

<div class="img-container" >

<img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg">

<div class="caption" >CAPTION</div>

</div>

我想你正在寻找这个..