css中怎么在图片中添加文字

在网页设计中，我们经常需要在图片上添加文字来增加网页整体的效果和吸引力。那么，在 CSS 中该怎么实现呢？本文将为大家介绍如何在图片中添加文字。
首先，在 HTML 中，我们需要将图片和文字元素包裹在一个容器中，可以使用 div 标签来实现。如下所示：

<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;
} 

这样，在图片上方就可以添加一段带有背景色和透明度的文字了。如果要在下方添加文字，则只需要将 .caption 内的 top 属性改为 bottom 即可。
除此之外，我们还可以在图片上覆盖一层半透明的蒙版，然后在蒙版上添加文字，效果更为优美。样式代码如下：

.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;
} 

以上就是在 CSS 中添加图片文字的方法，希望对大家有所帮助。