滚动内容的静态背景在上面

Question

我有兴趣模仿这里看到的背景效果：(Link)。基本上它是一个静态背景，滚动内容在顶部，但页面上的每个“窗口”部分有不同的背景。见下文：

进一步向下滚动：

我最初的想法是只有一个巨大的静态背景，每个“窗口图像”垂直堆叠在一起，然后顶部有透明背景的div，但这似乎是错误的。

如何重现此效果？

Answer 1

一般来说：

1. 使用fixed顶部栏的CSS定位（如上所述）
2. 为您的前景容器提供比背景容器更大的z-index
3. 通过将opacity设置为0
，使某些部分的背景“隐身”

您需要尝试使用背景图像和前景容器的宽度来确保正确。祝你好运！

Answer 2

你如何在你想要复制的主题森林上购买它们。网上有许多视差滚动教程，可以指导您完成此任务。

Answer 3

您可以使用fixed css定位来获得顶部栏的效果。然后对于页面的其余部分，我将使用某种封装div，使用relative css定位向下移动顶部条的高度。然后，对于不同的页面部分，只有一个接一个堆叠的div，并且只有不同的背景。

Link relating to css positioning