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