css实现文字在定位在图片上

CSS可以很容易地实现文字在图片上的效果。通过设置图片的position属性和文字的z-index属性，可以让文字浮在图片上面。以下是一个例子：

    <div class="container">
        <img src="example.jpg" alt="Example">
        <p class="text">这是一段文字</p>
    </div>

    .container {
        position: relative;
    }
    
    .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 1;
    }

在这个例子中，我们将图片和文字都放在了一个包含它们的容器中，并将容器的position属性设置为relative，这是因为在接下来的步骤中，我们需要将文字定位在容器的中心位置。

接着，我们设置了文字的position属性为absolute，并使用了top、left和transform属性将文字定位在容器的中心。最后，我们将文字的z-index属性设置为1，让其浮在图片之上。

使用CSS实现文字在图片上的效果非常简单，只需要几行代码就可以轻松实现。如果您想让页面更加生动动人，不妨尝试使用这个技巧吧！