如何让 fullPage.js 中的所有幻灯片都使用同一个背景？

Question

我正在尝试实现与此类似的东西

https://neonunicorns.com/html/noise/

上面的例子使用的是fullPage.js。请注意背景图像如何在您导航到不同部分时保持不变。

我搜索了示例并检查了插件的文档，但找不到任何相关信息。

目前，我所能做的就是将相同的 bg img 添加到所有幻灯片中，但是当您在幻灯片中滑动时，您可以清楚地看到背景图像正在更改。

我尝试创建一个带有 ID 的新 div 并将其放在幻灯片上方，但这也不起作用。

演示 https://jsfiddle.net/55euzL32/2/

HTML

<div id="fullpage">
    <div id="bg"></div>
    <section id="section1" class="section">
        <div class="container">
            <div class="col-md-12 text-center">
                <h1>Bootstrap 3 + fullpage.js<br>
                    <small>A working example of the pairing.</small>
                </h1>
                <p>Scroll down to move from section to section. The vertical pagination will love accordingly. This is powered by <a href="https://alvarotrigo.com/fullPage/">fullpage.js</a> and is pretty darn cool.</p>
            </div>
        </div>
    </section>
    <section id="section2" class="section">
        <div class="container">
            <div class="col-md-12 text-center">
                <p>Section 2</p>
            </div>
        </div>
    </section>
    <section id="section3" class="section">
        <div class="container">
            <div class="col-md-12 text-center">
                <p>Section 3</p>
            </div>
        </div>
    </section>
</div>

CSS

#bg {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url('../img/bg/bg.jpg') no-repeat 50% 50%;
    background-size: cover;
    z-index: -3;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

JS

$(document).ready(function() {
    $('#fullpage').fullpage({
        navigation: true,
        animateAnchor: true,
        parallax: true,
        parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
        lazyLoading: true
    });
});

Answer 1

您应该为 body 应用背景并将其设置为 background-position: fixed。

这是你的Fiddle updated。

如何让 fullPage.js 中的所有幻灯片都使用同一个背景？

How can I have one background for all slides in fullPage.js?

html

javascript

css

jquery

fullpage.js