[分享]css中如何给图片上添加文字

在网页设计中，经常需要对图片进行文字描述，以便更好地表达内容。CSS提供了一种简单的方法来实现这一目标，下面我们来看一下如何给图片添加文字。首先，我们需要将图片嵌套在一个div标签中，并设置该div的...

在网页设计中，经常需要对图片进行文字描述，以便更好地表达内容。CSS提供了一种简单的方法来实现这一目标，下面我们来看一下如何给图片添加文字。
首先，我们需要将图片嵌套在一个div标签中，并设置该div的position属性为relative。接着，我们可以添加一个子元素span，用于放置文字，将其position属性设置为absolute，并设置top和left属性，将其定位在图片上方或下方。
下面是一个基本的示例代码：

 <div class="img-wrap" style="position: relative;">
        <img src="example.jpg" alt="example image" />
        <span class="text" style="position: absolute; top: 0; left: 0;">这是一张示例图片</span>
    </div> 

 .img-wrap {
        position: relative;
    }

    .img-wrap span.text {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5);
        color: white;
        padding: 5px;
        font-size: 18px;
    }