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

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

将大图一分为二，另存为两幅

将前半部分设置为第一部分的

背景图像

，将第二部分设置为最后一部分的

背景图像

。您还需要将

背景位置第一次更改为
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;
}

有关详细信息，请参阅

下面是一个例子：


var slideTimeout；
$（'#fullpage'）。fullpage（{}）
#第1节{
背景：url（“https://i.stack.imgur.com/NKI2k.jpg）底部中心/盖；
}
#第2节{
背景：url（“https://i.stack.imgur.com/JXODm.jpg）顶部中心/盖；
}
#整版{
颜色：白色；
}
.居中{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：rgba（0,0,0,65）；
高度：100vh；
字号：3em；
字体系列：无衬线；
}

第一节
第二节
您可以使用css添加背景图像。问题是什么？我需要两个部分有一个主图片，而不是两个部分有两个相同的图片