如何使用css或js顯示底層圖像

-1

我想在滾動上顯示另一個圖像上方的圖像。我想到了與此頁面類似的效果：https://affinity.serif.com/de/photo/（實時過濾器部分，此處稱爲「固定滾動」）。如何使用css或js顯示底層圖像

最好是原生CSS解決方案或儘可能少的JS。

到目前爲止，我發現這個例子https://tympanus.net/Blueprints/ScrollingLayout/ 這幾乎是我想要的，但我不能想辦法讓背景附件固定元素的父，而不是整個視口。它只在全屏時才起作用，並且沒有任何效果超出此效果。

我也想過使用translate-y的解決方案，但無法找到一種方法將頂部圖像滑動到底部，而不是將底部圖像滑到第一個圖像上。

你能幫我解決這個問題嗎？或者指出我的方向是正確的，這可能會實現嗎？謝謝！

2017-01-26 ayredv

你的代碼在哪裏？ –

嘗試檢查鏈接的示例的源代碼，看看它們做了什麼 –

從源代碼可以看出它使用Javascript，並且它使用scrollTop來實現滾動。由於我不是很喜歡使用JS，我正在尋找一個CSS解決方案。我在StackOverflow上找到的另一個示例使用了相同的方法，但也僅適用於全屏場景。 – ayredv

據我所知使用background-attachment: fixed可能是唯一的方法來實現這種特殊的效果只使用CSS，但它看起來像不能解決您的問題。

我會嘗試一個簡單的視差滾動庫，如parallax.js。它使用JavaScript來達到預期的效果，但你可以通過CSS屬性數據應用的所有代碼，就像這樣：

<div id="mydiv" data-parallax="scroll" data-speed="0" data-image-src="/path/to/image.jpg"></div>

隨着data-speed="0"在div內的圖像將是固定的，你滾過。

2017-01-26 19:50:51

回答