z-index跨浏览器不兼容

Question

这是一个非常简短的简单代码的CodePen。

only html and css, and Bootstrap

它显示了一个非常基本的Bootstrap旋转木马，增加了白色透明覆盖层。轮播标题应显示在叠加层的顶部，但在Chrome浏览器中不会显示。不过，Firefox正在展示它应该如此。

我想让文字滑动并显示在所有浏览器的静态叠加层上。

Answer 1

为什么不使用：

<强> CSS

.carousel-inner > .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1;
    opacity: 0.5;
}

而不是单独的 overlay 容器？ 我的意思是你的CSS中甚至有一个content: ''这个容器，所以我猜它是或者应该是一个伪元素。