html怎么实现在图片右下角显示文字
可以使用CSS的定位和绝对定位来实现在图片右下角显示文字。
HTML代码:
<div class="img-container">
<img src="image.jpg">
<div class="img-text">图片描述</div>
</div>
CSS代码:
.img-container {
position: relative;
display: inline-block;
}
.img-text {
position: absolute;
bottom: 0;
right: 0;
background-color: #000;
color: #fff;
padding: 5px;
opacity: 0.8;
}
解释:
- 将图片和文字都放在同一个div容器中,设置该容器的position为relative,使得内部的绝对定位可以相对于该容器进行定位。
- 设置文字容器的position为absolute,bottom和right属性分别设置为0,使得文字容器定位到图片的右下角。
- 为文字容器设置背景色、文字颜色、padding和透明度等样式。
原文地址: https://www.cveoy.top/t/topic/bbDs 著作权归作者所有。请勿转载和采集!