滾動背景，直到整個背景圖像顯示

我有一個非常高的圖像，我用它作爲身體標記的背景。但是，頁面可能會比這個圖片更長，所以過了一段時間後我會看到背景顏色，因爲我使用了no-repeat（背景不是圖案）。滾動背景，直到整個背景圖像顯示

有沒有辦法保持背景可以滾動，然後當我到達圖像的末尾時，儘管頁面保持滾動，它仍然「卡在」底部。

2013-06-26 alex89x

您可以通過搜索「視差滾動」（如果我正確理解你）找到幫助。無論如何，它只能用CSS來完成。 –

@ dwreck08此刻我的代碼是 'body {background}：url（../ images/elefanti_bkg.png）repeat 0 0; background-size：100％100％; background-repeat：no-repeat; background-attachment：fixed;' 但結果明顯不同！ – alex89x

'背景位置：固定'不這樣做？ – DontVoteMeDown

您需要使用額外的固定圖層，將圖片底部設置爲透明，然後偵聽滾動事件以檢測何時到達原始背景的底部，將固定圖層設置爲可見並且瞧，您有它！如果您需要任何這些幫助，請提供您的代碼片段，以便我可以爲您實施。

來源

2013-06-26 19:11:51

而不是添加另一個圖層，我只是在body元素上替換了'background-attachment：fixed/scroll;'。 – Floremin

不是一個壞主意，但我的經驗是，大圖像作爲可滾動背景可能導致滯後。因此，由於Q指出了「非常高的圖像」的用法，我會在這種特殊情況下使用圖層來避免性能問題。否則，我同意這將是適當的解決方案。 – 2013-06-27 16:47:55

@derylius謝謝！我會試試這樣:) – alex89x

滾動背景，直到整個背景圖像顯示

回答

相關問題