如何在 fullpage.js 中应用固定背景

Question

我不是在问如何制作背景图片，我知道该怎么做。我在问如何应用一个固定的背景，它在整个网站上保持不变而不移动。滚动 up/down 将浏览幻灯片内容。我当前的代码将背景图像设置为第一张幻灯片，随后的幻灯片为白色。

这是我目前所拥有的：

HTML:

<div id="fullpage">
    <div class="section" id="section0" data-anchor="thisSection0">
        <h1>Section0</h1>
    </div>

    <div class="section" id="section1" data-anchor="thisSection1">
        <h1>Section1</h1>
    </div>

    <div class="section" id="section2" data-anchor="thisSection2">
        <h1>Section2</h1>
    </div>

</div>

CSS

#fullpage {
background-image: url('images/bg1.jpg');
}

剧本

$(document).ready(function(){
     $("#fullpage").fullpage({
         anchors: ['thisSection0', 'thisSection1', 'thisSection2'],
         responsive: 900,
         navigation: true,
         navigationPosition: 'right',
         navigationTooltips: ['Section 0', 'Section 1', 'Section 2']
     });
});

Answer 1

您可以使用css 属性固定的背景附件： http://www.w3schools.com/cssref/pr_background-attachment.asp

Answer 2

背景附件是关键。使用

background-attachment: fixed;

另外，根据您的要求，您需要调整背景 - background-repeat:no-repeat; 和 background-size:contain/cover; 以便背景图片看起来如您所愿

JSBin

Answer 3

试试这个：

#fullpage {
    background-image: url('images/bg1.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

如何在 fullpage.js 中应用固定背景

How to apply a fixed background in fullpage.js

javascript

jquery

html

css

fullpage.js