css中怎样在图片上添加文字

在网页设计中，图片的运用是非常重要的一部分。有时候，我们需要在图片上添加一些文字说明，让图片更加直观和易于理解。那么，在CSS中怎样在图片上添加文字呢？
首先，我们需要确定要添加文字的图片。假设我们有一个ID为“myImg”的图片，如下所示：

<img src="myImage.jpg" id="myImg"> 

接下来，我们需要创建一个父容器，用于包裹我们的图片和添加的文字。这里我们使用一个DIV元素：

<div id="imgContainer">
    <img src="myImage.jpg" id="myImg">
    <p class="textOnImg">这是一段文字</p>
</div> 

现在，我们的图片和文字都被包含在一个DIV元素中，并且我们为文字添加了一个class为“textOnImg”。接下来，我们可以使用CSS对这个class进行样式设置，让文字出现在图片上。

<style>
    #imgContainer {
        position: relative;
    }
    .textOnImg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }
</style> 

首先，我们将“imgContainer”设置为相对定位，以便我们将绝对定位的文本放置在图片上。接下来，我们为“textOnImg”设置样式。我们使用相对于父元素的绝对定位，并将其置于图片中央。我们还将文字居中，并设置其颜色，大小和字体样式。
这样，我们就可以在图片上添加文字了。当然，你也可以使用其他的CSS样式，让文字出现在图片的任何位置。通过这样的方式，我们可以在不改变图片本身的前提下，为图片添加更多的信息，使其更具吸引力和可读性。