FullPage JS - 特定部分的固定背景图像？

Question

我正在使用 FullPage.js 创建网站。对于我的 2-4 个部分，我希望背景图像保持固定，以便只有该部分中的内容在滚动，而不是背景图像。这是我尝试过的：

#section1 {
  background:#ccc;
}
#section2, #section3, #section4 {
  background:url('http://placehold.it/1024x768/7777c1/fff') no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position:center center;
}
#section5 {
  background:#000;
}
  #section5 h1 {
    color:#fff;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.js"></script>
<div id="fullpage">
 <div class="section" id="section1">
     <div class="slide"><h1>Simple Demo</h1></div>
     <div class="slide"><h1>Only text</h1></div>
     <div class="slide"><h1>And text</h1></div>
     <div class="slide"><h1>And more text</h1></div>
 </div>
 <div class="section" id="section2"><h1>No wraps, no extra markup</h1></div>
 <div class="section" id="section3"><h1>Just the simplest demo ever</h1></div>
  <div class="section" id="section4"><h1>Lorem Ipsum</h1></div>
  <div class="section" id="section5"><h1>Lorem Ipsum</h1></div>
</div>
<script type="text/javascript">
 var myFullpage = new fullpage('#fullpage', {
  licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE'
 });
</script>

我希望 background-attachment:fixed; 能解决问题，但背景仍然随着该部分滚动。

Answer 1

将所有内容包裹在包装器中 div 并将背景图像放在上面。

任何部分都可以具有 rgba 背景色、完全不透明的背景色，或者默认透明，具体取决于您希望每个部分的显示方式..

如果您需要更改背景图片，您可以使用一些回调。 afterLoad & onLeave。在这里您可以获得当前部分 (this.anchor) 甚至 direction.

如果你知道这些信息，你可以很容易地更改 .wrapper 的 backgroundImage。

var myFullpage = new fullpage('#fullpage', {
  licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
  anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
  onLeave: function(origin, destination, direction) {
    if (this.anchor === 'page2' && direction === 'down') {
      document.querySelector('.wrapper').style.backgroundImage = `url(https://placekitten.com/700/350)`
    } else if (this.anchor === 'page2' && direction === 'up') {
      document.querySelector('.wrapper').style.backgroundImage = `url(https://placekitten.com/600/300)`
    }

  }
});

#section1 {
  background: rgba(125, 125, 125, 0.5);
}

#section2 {
  background: white;
}

#section2 {
  background: black;
  color: white;
}

#section5 {
  background: rgba(0, 0, 0, 0.5);
}

.wrapper {
  background: url('https://placekitten.com/600/300') no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.3/fullpage.min.js"></script>
<div class="wrapper">
  <div id="fullpage">
    <div class="section" id="section1">
      <div class="slide">
        <h1>Simple Demo</h1>
      </div>
      <div class="slide">
        <h1>Only text</h1>
      </div>
      <div class="slide">
        <h1>And text</h1>
      </div>
      <div class="slide">
        <h1>And more text</h1>
      </div>
    </div>
    <div class="section" id="section2">
      <h1>No wraps, no extra markup</h1>
    </div>
    <div class="section" id="section3">
      <h1>Just the simplest demo ever</h1>
    </div>
    <div class="section" id="section4">
      <h1>Lorem Ipsum</h1>
    </div>
    <div class="section" id="section5">
      <h1>Lorem Ipsum</h1>
    </div>
  </div>
</div>

FullPage JS - 特定部分的固定背景图像？

FullPage JS - Fixed background image for specific sections?

css

fullpage.js