在幻灯片及其说明之间有一个静态叠加层

Question

Hello stackoverflowers！

我现在正在写信给您，是因为我已经使用猫头鹰传送带了一段时间了，在特定情况下，我需要做以前从未需要的事情，幻灯片及其描述之间的叠加。

因此，现在我有了网站的模型，我开始尝试一些操作，例如在'owl-carousel'之前添加叠加层作为::。然后，我使用我的z-index（es）并在幻灯片div包装器本身之前为每个内部类添加了静态定位。

不幸的是，z索引无法正常工作，并且叠加层和幻灯片（图像和文本）始终是彼此上下两个实体。

         <div class="owl-carousel">
            :before <-- my overlay
            <div class="slide"> 
                <img src="photos/slide1.jpg">
                <div class="description">
                    text that need to be over the overlay
                </div>

            </div>
            <div class="slide">
                <img src="photos/slide2.jpg">
                <div class="description">
                    text that need to be over the overlay
                </div>
            </div>
            <div class="slide">
                <img src="photos/slide1.jpg">
                <div class="description">
                    text that need to be over the overlay
                </div>
            </div>
        </div>

这是我想要工作的一个示例，就像您在这张图片上看到的> https://i.imgur.com/I2pBGCz.jpg

（下面带有培训师的照片将是我的幻灯片img和“ nouveau概念-le coachingaccessààtous sans rdv en 35min”，随附的说明，是的，抱歉，它是法文：）]]

在幻灯片图像和说明之间有蓝色的叠加层，您可以在其中同时滑动图像和文本。

你们对这个事情有什么建议吗？我会很高兴。我知道这可能很简单，但我不能指责:(它太令人沮丧了！

提前感谢！

ps：对不起，如果我搞砸了用英语写东西。

Answer 1

在那儿做一点碰撞，希望2020年有答案：p