Question

我一直对一些CSS感到困惑，据我所知，应该可以正常工作。

我有一个旋转滑块，可以生成幻灯片并在每张幻灯片上放置一个叠加层。我希望覆盖在一些幻灯片而不是其他幻灯片上，因此在运行时将前一个元素（li）放在一个名为noOverlay的类上。子div（覆盖图，名为slotholder的类）以::after的形式应用了css，以将叠加层应用为背景。我创建了另一个css声明，它通过父div选择slotholder::after。

问题是，css似乎没有被应用。

您可以在此处查看实时页面http://wwtw.org.uk/woa

提前感谢您提供任何帮助。

代码如下; （第一个css声明给所有幻灯片叠加，第二个，我希望，将删除它）

CSS：

.banner .rev_slider .slotholder:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    /* black overlay with 50% transparency */
    background: rgba(0, 0, 0, 0.5);
}

.noOverlay .slotHolder:after {
   background: rgba(0, 0, 0, 0.0) !important;
}

HTML：

<li data-transition="fade" 
        data-slotamount="5" 
        data-masterspeed="700"
        data-title="Slide 1" 
        class="noOverlay tp-revslider-slidesli active-revslide" 
        style="width: 100%; 
                height: 100%; 
                overflow: hidden; 
                z-index: 20; 
                visibility: inherit; 
                opacity: 1; 
                background-color: rgba(255, 255, 255, 0);">
    <div class="slotholder" 
            style="position: absolute; 
                    top: 0px; 
                    left: 0px; 
                    z-index: 0; 
                    width: 100%; 
                    height: 100%; 
                    visibility: inherit; 
                    opacity: 1; 
                    transform: matrix(1, 0, 0, 1, 0, 0);">
        <!-- Runtime Modification - Img tag is Still Available for SEO Goals in Source - 
            <img src="https://wwtwcrushcmsstorage.blob.core.windows.net/wwtwcrushcmsstoragecontainer/Eh0CWQwmpodvMvUmC0K3lIpQB3pm.jpg&#10;" 
                    alt="Starting in L.A. - 1000 Miles - 12 Weeks" 
                    data-bgposition="center center" 
                    data-bgfit="cover" 
                    data-bgrepeat="no-repeat" 
                    data-bgparallax="10" 
                    class="rev-slidebg defaultimg" 
                    data-no-retina="">-->
    </div>
</li>

CSS叠加在旋转滑块上

0 个答案: