在CSS中,我们可以通过在图片上添加文字来增强图片的表现力和交互性。以下是一些实现方法:1. 在图片下方使用p标签添加文字HTML代码:<div class= container &am
<div class="container"><br>
<img src="image.jpg" alt="image" /><br>
<p>这是一张图片的描述</p><br>
</div>
.container {<br>
position: relative;<br>
}<br>
.container p {<br>
position: absolute;<br>
bottom: 0;<br>
width: 100%;<br>
text-align: center;<br>
background-color: rgba(0, 0, 0, 0.5);<br>
color: #fff;<br>
padding: 10px;<br>
margin: 0;<br>
}
<div class="container"><br>
<img src="image.jpg" alt="image" /><br>
<p>这是一张图片的描述</p><br>
</div>
.container {<br>
position: relative;<br>
}<br>
.container p {<br>
position: absolute;<br>
top: 50%;<br>
left: 50%;<br>
transform: translate(-50%, -50%);<br>
padding: 10px;<br>
background-color: rgba(0, 0, 0, 0.5);<br>
color: #fff;<br>
text-align: center;<br>
font-size: 20px;<br>
font-weight: bold;<br>
}
粉丝
0
关注
0
收藏
0