CSS是前端开发中极其重要的一部分，它能够实现页面中各种各样的效果。本文将介绍如何使用CSS让图片上面出现文字。
首先，我们需要在HTML中添加一个图片标签：
<img src="image.jpg" alt="description">
接下来，我们需要给图片添加一个父容器，并使用CSS对它进行定位。这里的定位方式使用绝对定位，因为我们希望文字出现在图片上方，并且不会影响其他元素的位置。
<div class="img-container">
<img src="image.jpg" alt="description">
<p class="text">这是图片上面的文字</p>
</div>
.img-container {
position: relative;
}
.text {
position: absolute;
top: 0;
left: 0;
}
通过上述代码，我们创建了一个带有图片和文字的容器。其中，img-container类用来标识父容器，text类用来标识文字的样式。
通过设置img-container的position为relative，我们可以让它成为text的定位参考点。接着，我们把text的position设置为absolute，并设置top和left值都为0，这样文字就会出现在图片的最上面。
在这个过程中，我们还可以对text类添加后续的样式，例如设置文字的颜色、背景色、透明度等等。
最终效果如下：
这是图片上面的文字
.img-container {
position: relative;
}
.text {
position: absolute;
top: 0;
left: 0;
background-color: #000;
color: #fff;
padding: 5px;
opacity: 0.8;
}
通过上述代码和效果，我们可以看到一个简单的CSS技巧如何让图片上面出现文字。在实际的页面开发中，这种效果通常被用来对图片加上说明、标签等等，提高页面的可读性。
