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元素

回答

相关问题