[分享]css中怎么在图片上写字

在网页设计中，我们常常需要在图片上添加文字说明。这时，我们可以利用CSS的一些属性来实现在图片上写字。首先，我们需要将图片置于一个容器中，在容器中添加图片，并使用属性将图片定位。然后，我们可以使用zi...

在网页设计中，我们常常需要在图片上添加文字说明。这时，我们可以利用CSS的一些属性来实现在图片上写字。
首先，我们需要将图片置于一个容器中，在容器中添加图片，并使用position属性将图片定位。然后，我们可以使用z-index属性将容器和图片层叠起来，使文字可以显示在图片上方。接着，我们可以使用position和top、left属性来确定文字在图片上的位置。
下面是一个示例代码：

<style type="text/css">
    .container {
        position: relative;
        width: 500px;
        height: 400px;
    }
    img {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .text {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }
</style>

<div class="container">
    <img src="example.jpg" alt="" />
    <p class="text">这是一段图片上的文字说明</p>
</div> 

在上面的代码中，container类为容器，img标签为添加的图片，text类为文字说明。其中，text类使用了transform属性来居中文字，颜色、字号和字重可以根据需求修改。
以上就是在图片上写字的基本方法，可以通过添加其他属性和样式来实现更多的效果。