靜態背景隨着滾動內容的頂部

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

你如何購買那些在你試圖複製的主題森林中獲得高價。網絡上有許多視差滾動教程，可以引導您瞭解這一點。