css字体飘在图片上

使用CSS可以让我们的网页更加的美观，其中一个很常见的效果就是字体飘在图片上。下面我来介绍一下这个效果的实现方法。

.img-wrapper {
    position: relative;
    display: inline-block;
}
.img-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}
.img-wrapper p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
    

首先，我们需要先将图片和文字包裹在一个div容器中，并且将这个容器设置为relative定位。这是为了让我们在后面给p标签设置绝对定位时以这个容器为准。

然后，我们为img标签设置了一个max-width: 100%; 的CSS属性，让图片宽度自适应容器大小。接着，我们给p标签设置了绝对定位，并且将其顶部和左侧都定位在50%的位置上。使用translate属性将其向左上方偏移50%，实现让文字水平垂直居中的效果。

最后，我们可以为p标签设置字号大小、颜色和字体阴影等效果，让文字更加突出和美观。

通过以上CSS代码的设置，我们就可以实现文字飘在图片上的效果了。这个效果不仅可以让页面更加有趣和生动，还能看到更好的用户体验提升。如果你在设计网页时需要此效果，不妨试一试这段CSS代码吧。

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