Question

您好我正在个人网站上工作，我想要一张底部〜10％的圆形照片，我可以放一些文字。 Here is picture to better describe what I want如果有人能指点我的教程或告诉我如何做到这一点会很棒。

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

我认为你正在寻找这个......

圆形照片上的小叠加

1 个答案: