CSS複数の固定背景擬似要素

Question

CSSのみとサードパーティのライブラリを使用しない視差スクロール効果を作成しようとしています。 background-attachment: fixedを使用すると、自分のページ上の複数のフル幅のdivに必要な効果を達成することができました。しかし、これを使用すると、パフォーマンスに悪影響を及ぼします。

.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; 
    } 
} 

私はそれを試してみるために、1つのdivにこの方法を使用し、それは見事に働いていた：私の代わりにhereを発見したものに私の方法を変更しました。しかし、それを残りの部分に適用すると、背景がすべて重なってしまい、残りの部分が背後にあるので、そのうちの1つだけを見ました。擬似要素はすべて重複しているので、明らかにZインデックスの問題ですが、私はCSSのみの解決策は考えられません。

Answer 1

残念ながら、あなたの視差効果は複数のdivでは機能しません。実際の例でも、最初のイメージはdivに関係なく、ページ全体の背景にとどまります。div1とdivで区切られます。

次のリンクを見てくださいする複数のdiv視差効果：

Pure CSS Parallax Websites

これが役に立てば幸い！