[分享]css 文字上面加图片

在网页设计中，为了增加页面的视觉效果，我们经常会将一些图片放置在文字之上。这样做可以使整个页面的排版更加美观，让用户的视线更容易被吸引。那么，在 CSS 中如何实现文字上方加图片呢？下面我们就来看一下...

在网页设计中，为了增加页面的视觉效果，我们经常会将一些图片放置在文字之上。这样做可以使整个页面的排版更加美观，让用户的视线更容易被吸引。那么，在 CSS 中如何实现文字上方加图片呢？下面我们就来看一下。

.img-txt {
position: relative;
}
.img-txt img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.img-txt p {
position: relative;
z-index: 2;
}

如上述代码所示，我们首先将包裹图片和文字的容器设置为相对定位（position: relative;），然后将图片设置为绝对定位（position: absolute;），并且设置 top 和 left 属性，让图片位于文字的正上方。接着，为了让图片居中显示，我们使用 transform 属性和 translateX 函数来进行定位，让图片的左右居中。最后，为了让文字在图片之上显示，我们将文字容器的 z-index 属性设置为更高的值。

使用以上实现方式，可以轻松实现文字上面加图片的效果，让网页的排版更加美观，带来更好的用户体验。