css文字覆盖图片上面

在Web页面设计中，有时需要将文字放在图片的上层，以达到视觉上的效果。这时，可以使用CSS技术来实现文字覆盖在图片之上的效果。

下面是实现文字覆盖图片上的CSS样式代码：

.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {
    display: block;
}
.image-container p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: white;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}
    

以上代码中，.image-container类代表图片容器，其属性为position: relative; display: inline-block; 实现对子元素的定位。

而图片元素img> 的样式为display: block; ，即将图片设置为块级元素，使得其占据整个容器。

最后，p> 元素作为文字容器，使用position: absolute; 来实现绝对定位，将文字放到图片容器的中心位置。同时，使用z-index: 1; 使文字层叠在图片之上。其余属性如字体颜色、大小、加粗等可根据具体需求修改。

通过以上CSS样式代码的设置，就可以在网页设计中实现文字覆盖在图片之上的视觉效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！