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

【问题标题】：How to put one picture on two screens in fullPage.js如何在fullPage.js中将一张图片放在两个屏幕上
【发布时间】：2018-09-08 12:50:33
【问题描述】：

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

【问题讨论】：

你可以使用css添加背景图片。有什么问题？jsfiddle.net/nppyyqax/38
我需要一张主图分成两个部分，而不是两个部分的两张相同的图片

标签： javascript jquery css fullpage.js

【解决方案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>

【讨论】：