HTML代码
<div class="item-02-bot circle-border">
<div class="img-container">
<img src="../static/images/1.jpg" alt=""/>
<div class="img-textbox">
<p class='img-text'>青少年口语</p> //蒙版上的文字
</div>
</div>
<div class="img-header">
<h3><a href="">青少年口语</a></h3> //图片下的标题
</div>
</div>
CSS代码:
.circle-border {
background-color: transparent; //背景透明无颜色
}
.img-container { //图片和蒙版以及蒙版上的字
position: relative; //相对于自身的正常位置定位
overflow: hidden; //当内容溢出时显示方式为隐藏
border-top-left-radius: 10px; //图片左上右上为圆角
border-top-right-radius: 10px;
}
.img-container .img-textbox {