css中文字在图片上

CSS中文本与图片的组合非常常见，不仅可以让网站页面更加美观，也能够让内容更加直观、易懂。下面我们来介绍如何实现在图片上显示文字效果。

首先，在HTML文档中引入图片和文本标签：

<div class="container">
   <img src="myImage.jpg" alt="我的图片">
   <p>这是我的图片的描述文字</p>
</div> 

这里我们使用了一个容器来包含图片和文本，方便后面的CSS样式处理。

接下来，我们需要让文本内容显示在图片上方。这里有两种方法：

方法一：使用绝对定位

.container {
   position: relative;
}

.container p {
   position: absolute;
   top: 0;
   left: 0;
} 

首先，将容器的position属性设为relative，这样在后续设置绝对定位时，可以相对于这个容器进行定位。然后将p标签的position属性设为absolute，使其脱离文档流，并设置top和left属性为0，这样p标签就会被定位到容器的左上角。

方法二：使用负margin

.container p {
   margin-top: -50px;
} 

这里我们只需要对p标签设置一个负的margin-top属性值，使其向上移动，这样就能够显示在图片上方了。

最后，我们还可以对字体、大小、颜色等样式进行进一步的调整，使其更加美观和适配页面。

以上就是如何在CSS中实现文字在图片上方的效果的方法，希望对大家有所帮助。