单个幻灯片上的背景图像叠加渐变

Question

我试图使用fullpage.js在单个幻灯片上的背景图像上添加叠加渐变，但是，如果我在该部分的1张特定幻灯片上添加了一个类，则会将叠加层复制到序列中的每个幻灯片上。我需要为单个幻灯片制作特定的叠加渐变。

http://www.pulsecreative-clients.com/staging/hogshead/#accommodations

<section id="section-4" class="section">
        <div class="hh-upper">
            <a href="#golf"><div class="arrow-up"></div></a>
        </div>

        <div id="specific-slide" class="slide fp-bg s4-s1 desktop-gradient mobile-gradient" style="background-image: url('<?php echo site_url(); ?>/wp-content/themes/bones/images/accom1.png');">
            <div class="hh-content-box">
                <h2>ACCOMMODATIONS</h2>
                <p class="italic">
                    Designed with modern luxury and ultimate comfort, whether at the lodge or in our private cottages, our peaceful accommodations optimize your downtime for maximum restfulness and tranquility.
                </p>
            </div>
        </div>

        <div class="slide fp-bg s4-s2 mobile-gradient" style="background-image: url('<?php echo site_url(); ?>/wp-content/themes/bones/images/accom2.png');">
            <div class="hh-content-box">
                <h2 >THE LODGE</h2>
                <p>Set on the shores of the beautiful and serene *** in ***, The Lodge at *** is warm, welcoming and steeped in the tradition of its Kerry, Ireland past.  The Lodge has woven together luxurious comfort, old world charm and elegant interiors, which is what makes this 48-bedroom Lodge breathtaking and unique.</p>
            </div>
        </div>
        <div class="slide fp-bg s4-s3  mobile-gradient" style="background-image: url('<?php echo site_url(); ?>/wp-content/themes/bones/images/accom3.png');">
            <div class="hh-content-box">
                <h2>COTTAGES</h2>
                <p>In addition to the Lodge, ***** Members will be able to enjoy a home away from home experience in one of our exclusive four-bedroom Cottages.  Members can relax in a private residence for the ultimate escape.  There are five modern, luxurious cottages at the Lodge.
                </p>
            </div>
        </div>
        <div class="hh-downer">
            <a href="#health"><div class="arrow-down"></div></a>
        </div>
    </section>

CSS

.desktop-gradient:before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 50%, rgb(0, 0, 0) 100%) !important;
    opacity: .6;
}

我尝试过在部分中嵌套并使用唯一的类。使用：before或：after复制到每张幻灯片。