如何在 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>

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

How to put one picture on two screens in fullPage.js

javascript

jquery

css

fullpage.js