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

【问题标题】：How to apply a fixed background in fullpage.js如何在 fullpage.js 中应用固定背景
【发布时间】：2015-07-23 02:08:12
【问题描述】：

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

这是我目前所拥有的：

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']
     });
});

【问题讨论】：

标签： javascript jquery html css fullpage.js

【解决方案1】：

背景附件是关键。使用

background-attachment: fixed;

另外，根据您的要求，您将需要使用背景 - background-repeat:no-repeat; 和 background-size:contain/cover;，以便背景图像看起来像您想要的那样

JSBin

【讨论】：

我已经尝试在#fullpage 上使用它，但它不起作用。我认为这可能与框架有关。还有其他想法吗？？
@user3589485 它与框架无关。它是一个常见的 css 属性。
@user3589485 我添加了一个jsbin，检查一下
我设法在您的帮助下解决了这个问题，但我必须在框架脚本页面中设置 css3:false 并添加： background-image: url('images/bg1.jpg');背景附件：固定；到CSS中的#fullpage和每个#section1，#section2，#section3。谢谢
在 fullPage.js 中使用 css3:true 时，我还会指出与 Chrome 中的错误相关的 this issue。

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：