css中如何给图片上添加文字

在网页设计中，经常需要对图片进行文字描述，以便更好地表达内容。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> 

现在我们可以对该div和span元素进行样式设置，来实现不同的效果。例如，我们可以将span元素的背景色设置为半透明黑色，文字颜色设置为白色，创建出一个类似于图片标题的样式：

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

此外，我们还可以根据需要使用CSS动画等效果来强调图片标题的内容，例如使用hover伪类来实现鼠标悬停时的动画效果。
总之，CSS提供了多种方法来给图片添加文字描述，只要灵活运用，就可以更好地展现网页内容。