在网页设计中,我们经常需要在图片上添加文字来增加网页整体的效果和吸引力。那么,在 CSS 中该怎么实现呢?本文将为大家介绍如何在图片中添加文字。首先,在 HTML 中,我们需要将图片和文字元素包裹在一
<div class="container"> <img src="image.png" alt="图片"> <p class="caption">这里是图片描述</p> </div>
.container { position: relative; } .caption { position: absolute; top: 0; left: 0; width: 100%; padding: 10px; background-color: rgba(0,0,0,0.7); color: #fff; font-size: 14px; }
.container { position: relative; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); } .caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 14px; }
粉丝
0
关注
0
收藏
0