图片上显示半透明文字②
HTML代码:
<div class="card image-Translucency" style="width: 38rem;"> <img src="图片网址" class="card-img-top" style="height:330px ; object-fit: cover;"> <div class="overlay-Translucency"> <h5 class="text-Translucency">文字标题</h5> <p class="text-Translucency">小字号文字内容</p> </div> </div>
CSS代码:
<!-------------图片上显示半透明图层带文字---------------->
<style>
.image-Translucency {
position: relative;
width: 100%; /* 可根据需要自行修改 */
}
.image-Translucency img {
width: 100%; /* 可根据需要自行修改 */
height: auto;
}
.overlay-Translucency {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 /
color: white; / 文字颜色 /
width: 100%; / 可根据需要自行修改 /
padding: 10px 10px; / 上下padding */
}
.text-Translucency {
text-align: center; /* 文字居中 /
margin-top: 15px; / 添加上间距 */
}
</style>
<!-------------图片上显示半透明图层带文字---------------->