CSS多個固定背景psuedo元素

我想創建一個視差滾動效果只使用CSS和沒有第三方庫。使用background-attachment: fixed我能夠在我的頁面上實現我想要的多個全角div的效果。然而，利用這一點，會對性能造成很大的負面影響。我不是改變了我的方法，將一個發現here：CSS多個固定背景psuedo元素

.element { 
    overflow: hidden; // added for pseudo-element 
    position: relative; // added for pseudo-element 

    // Fixed-position background image 
    &::before { 
    content: ' '; 
    position: fixed; // instead of background-attachment 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: url('/path/to/img.jpg') no-repeat center center; 
    background-size: cover; 
    will-change: transform; // creates a new paint layer 
    z-index: -1; 
    } 
}

我用一個DIV這種方法來嘗試一下，而且工作非常出色。然而，當我把它應用於其他的時候，背景都是重疊的，我只見過其中一個（因爲其餘的都在它後面）。這顯然是一個z-index問題，因爲所有僞元素都是重疊的，但我無法想到一個僅用CSS的解決方案。

來源

2017-04-07 topherlicious

你介意鏈接到演示？ –

我做了codepens演示這個問題。 [This]（http://codepen.io/anon/pen/peXyNZ）展示了它在正常工作時的外觀（只在一個div上）和[this]（http://codepen.io/anon/pen/vxqGKG ）是我將效果複製到多個元素時的外觀（每個div - 不起作用）。 – topherlicious

不幸的是，我不認爲你的視差效果會對多個div有效。即使在工作示例中，無論您使用的是哪個div，第一張圖片都會作爲整個頁面的背景。它只會被div 1和2所掩蓋。

我會查看以下鏈接使多個DIV視差效果：

Pure CSS Parallax Websites

希望這有助於！

來源

2017-04-07 13:38:23

CSS多個固定背景psuedo元素

回答

相關問題