如何在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("https://i.stack.imgur.com/NKI2k.jpg") bottom center /cover;
}
#section2{
  background:url("https://i.stack.imgur.com/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>