css字再图片中间

在做网页设计和开发的过程中，我们经常会遇到需要将文字嵌入到图片中间的情况，这时候就需要用到CSS中的文字在图片中间的技巧。

img {
    position: relative;
    display: block;
}
img::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: Nowrap;
    background-color: rgba(0,0.5);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
}

以上代码中，我们将图片设置为相对定位，然后在图片的伪元素::after中使用绝对定位，将文本放在图片的中间。需要注意的是，使用transform属性来使伪元素水平垂直居中，同时使用white-space属性来防止文本换行。

除此之外，我们还可以根据需要自定义背景颜色、字体大小等属性，从而使文字在图片中间的效果更加符合设计需求。