css中怎么让图片和文字叠加

CSS中有多种方法可以让图片和文字叠加，下面介绍几种常见的方法。

/* 方法一：使用position属性 */
.container {
    position: relative;
}
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<div class="container">
    <img src="image.jpg">
    <p class="text">这是文字</p>
</div> 

这种方法需要设置容器元素的position属性为relative，再将文字元素的position属性设置为absolute，并用top、left和transform属性使文字居中显示。由于设置了容器元素的position属性，文字元素的position属性会相对于容器元素的位置进行定位。

/* 方法二：使用z-index属性 */
.container {
    position: relative;
}
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
<div class="container">
    <img src="image.jpg">
    <p class="text">这是文字</p>
</div> 

这种方法也需要设置容器元素的position属性为relative，但是文字元素的position属性不需要设置为absolute，只需要设置z-index属性来让文字显示在图片上面就可以了。由于设置了容器元素的position属性，文字元素的z-index属性会在容器内相对于其他元素进行排列。

相比而言，第一种方法更加灵活，可以对文字的位置和大小进行更加精确的控制。但是第二种方法更加简洁，只需要设置一个属性就能达到叠加的效果，适用于一些简单的布局。