html - 图片上的文字叠加

Question

我正在使用主 slider 插件。slide1 2 3 都有不同的类。试图在图像上放置文本但不显示。我试过这个却什么也看不到

.classnameslide1:before {
content: 'Text inserted before via CSS';
 }  
and  
.classnameslide1:after{
content: 'Text inserted before via CSS';
 }

Answer 1

使用父元素的相对位置和伪元素的绝对位置，比如，

.classnameslide1 {position: relative; z-index: 1}
.classnameslide1:after {content: 'Text inserted before via CSS'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3}