javascript - fullPage.js中如何将一张图片放在两个屏幕上

Question

我有一个使用 fullpage.js 的元素。而且我完全不知道如何将一张大图片放在两个屏幕上，这样它就不会保持固定。

Answer 1

将大图剪成两半，保存为两张图。

将上半部分设置为第一节的background-image，将下半部分设置为最后一节的background-image。您还需要将第一个 background-position 更改为 100% 50%，第二个更改为 0 50%。

简而言之:

.first-half {
  background: url('/path/to/top-half.png') bottom center no-repeat /cover;
}
.second-half {
  background: url('/path/to/bottom-half.png') top center no-repeat /cover;
}

参见 background shorthand了解详情。

这是一个例子:

var slideTimeout;

$('#fullpage').fullpage({});

#section1{
    background:url("/image/NKI2k.jpg") bottom center /cover;
}
#section2{
  background:url("/image/JXODm.jpg") top center /cover;
}
#fullpage {
  color: white;
}
.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,.65);
  height: 100vh;
  font-size: 3em;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>

<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>

<header id="header">

</header>
<div id="fullpage">
    <div class="section" id="section1">
      <div class="centered">
        First Section
      </div>
    </div>
    <div class="section" id="section2">
      <div class="centered">
        Second Section
      </div>
    </div>
</div>