在fullPage.js中，如何为所有幻灯片提供一个背景?

本文介绍了在fullPage.js中，如何为所有幻灯片提供一个背景?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在努力实现类似的目标

I am trying to achieve something similar to this

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

The example above is using fullPage.js. Notice how the background image stays the same as you navigate to different sections.

我搜索了示例，并查看了插件的文档，但找不到任何相关内容.

I searched for examples and checked the plugin's documentation but couldn't find anything about it.

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

At the moment, all I can is add the same bg img to all the slides but when you're sliding through the slides, you can clear see the background images being changed.

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

I tried creating a new div with an ID and place it above the slides but that didn't work either.

演示 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);
}

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

slides

在fullPage.js中，如何为所有幻灯片提供一个背景?

问题描述

推荐答案