如何在fullPage.js中为所有幻灯片设置一个背景？

我正在努力实现与此类似的东西

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

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

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

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

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

DEMO https://jsfiddle.net/55euzL32/2/

HTML

 
 
 
 
 
 
Bootstrap 3 + fullpage.js
 A working example of the pairing. 
 
Scroll down to move from section to section. The vertical pagination will love accordingly. This is powered by fullpage.js and is pretty darn cool.
 
 
 
 
 
 
 
Section 2
 
 
 
 
 
 
 
Section 3
 
 
 
  

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 。

这是你的小提琴更新 。