CSS多个固定背景psuedo元素

Question

我试图创建一个视差滚动效果，只使用CSS，没有第三方库。使用background-attachment: fixed，我能够在页面上的多个全宽div上实现我想要的效果。然而，使用它会对性能产生很大的负面影响。我将我的方法改为找到here的方法

.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索引问题，因为所有的伪元素都是重叠的，但我想不出只有CSS的解决方案。

Answer 1

不幸的是，我不认为你的视差效果会在多个div上起作用。即使在工作示例中，无论您位于哪个div中，第一个图像都将作为整个页面的背景。它只是被div1和div2所掩盖。

我会看一下下面的链接来制作多个div视差效果：

Pure CSS Parallax Websites

希望这能有所帮助！