图片上显示半透明文字②
绝命毒师

该剧讲述了一位普通的高中化学老师在得知自己身患绝症之后,为了给他的家人留下财产,而利用自己超凡的化学知识制造毒品,并成为世界顶级毒王的传奇犯罪故事。

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> <!-------------图片上显示半透明图层带文字---------------->