css在图片上放 文字

在网页设计中，我们经常需要把文字放在图片上，以实现更多的视觉效果和吸引用户的注意力。那么，如何用CSS实现在图片上放置文字呢？下面是具体操作步骤：

① 在HTML中，使用img标签来插入图片，为其添加一个类名。img class="pic" src="example.jpg" alt="example">
② 在CSS中，使用绝对定位（position:absolute）来让文字覆盖在图片上，并设置top和left属性来控制文字的位置。.pic {
    position: relative;
}
.pic::after {
    content: "这里是文字";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
③ 为文字设置样式，可以通过color、font-size、font-family等属性来控制文字的颜色、大小、字体等。.pic::after {
    content: "这里是文字";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 24px;
    font-family: Arial, sans-serif;
}
    

需要注意的是，使用上述方法时，图片必须具有relative或者absolute的定位，否则文字无法定位于图片上。

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