Question

我在切换滑块的多个背景图像时遇到问题。

例如，在我的CSS中，我以前的背景是

body {
    cursor: crosshair;
    background: url(http://mythologian.net/wp-content/uploads/2017/01/lotus-flower-meaning-symbolism.jpg) no-repeat center center; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

此功能仅能将一张图片过渡到第三张幻灯片。（第一个是使用vid.js在后台播放视频。）

我的问题：过渡到第三张图像后，如何继续对多张图像进行简要说明。

为了让您对我在说什么有个更好的了解，我创建了一个CodePen项目，以便您能有第一手的印象。

这是我遇到的问题：

<!--This is where I want to have a third background -->
<div id="background">
  <div class="content">
    <h1>Lotus Flower</h1>
    <p class="data">
      Back in Egyptians times, the lotus flower was very important in their religion. Meaning creation and rebirth, it was a symbol of the sun, because at nightfall it closes and goes beneath the water and at dawn it climbs up above the water and reopens.
    </p>
  </div>
</div>

This is the codepen link to the problem slide

如何使用GSAP和CSS创建不同的背景图像？

0 个答案: