您好我正在个人网站上工作,我想要一张底部〜10%的圆形照片,我可以放一些文字。 Here is picture to better describe what I want如果有人能指点我的教程或告诉我如何做到这一点会很棒。
答案 0 :(得分:2)
.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>
&#13;
我认为你正在寻找这个......