静态背景随着滚动内容的顶部

Question

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

向下滚动进一步：

我最初的想法是只是有一个巨大的静态背景，每个“窗口形象”堆放在彼此的顶部垂直，然后在顶部有透明背景的div，但这看起来是错误的。

如何重现此效果？

Answer 1

一般：

1. 使用fixed的顶栏CSS定位（如上所述）
2. 给你的前景容器比你的背景容器更大z-index
3. 充分利用背景的某些部分“隐形”通过将其设置为opacity至0

你会想要试验你的背景图像和前景容器的宽度以使事情正确。祝你好运！

Answer 2

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

Link relating to css positioning

Answer 3

你如何购买那些在你试图复制的主题森林中获得高价。网络上有许多视差滚动教程，可以引导您了解这一点。