css在图片上面显示文字

CSS 是一门用于美化 HTML 页面样式的语言，它不仅可以掌控网页整体的布局，还可以让网页看起来更加美观。其中，CSS显示在图片上面的文本效果常被用于网页设计，下面我们就来学习一下如何实现这种效果。

img {
    position: relative;
    display: block;
}
img::before {
    content: "这是在图片上面的文本";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
img:hover::before {
    opacity: 1;
}
    

上述代码中，我们使用了 position 属性为相对定位（relative）的 img 元素作为背景，然后在它上面使用了一个 ::before 伪元素来实现文字的显示。::before 伪元素会生成一个在元素内容前面的额外内容，我们在这里添加了我们想要展示的文字。

接着，我们将这个 ::before 伪元素设置为绝对定位（absolute），并且将其 top、left、right、bottom 四个属性都设置为 0，这样才能把 ::before 伪元素完全覆盖在 img 元素之上。同时，我们还为这个 ::before 伪元素设置了一个背景色和字体颜色，这样能保证文字在图像上面能清晰可见。

最后，我们使用了一个鼠标悬停事件的伪类来实现在鼠标放到图像上面的时候，展示文字的效果。这里通过改变这个 ::before 伪元素的透明度，来实现文字隐现的效果。

通过这种方式，我们就可以很好的实现在图像上面展示文字的效果了。如果您是想要给网页增加点不同的趣味性，这种效果肯定是值得尝试的。

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