Question

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

这是我到目前为止所做的：

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

SCRIPT

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

Answer 1

背景附件是关键。使用

background-attachment: fixed;

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

JSBin

Answer 2

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

Answer 3

试试这个：

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

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

3 个答案: