0

我正在尝试仅使用 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;
  }
}

我在一个 div 上使用了这种方法进行了尝试，效果非常好。然而，当我将它应用到其余部分时，背景全部重叠，我只看到其中一个（因为其余部分在它后面）。这显然是一个 z-index 问题，因为所有伪元素都是重叠的，但我想不出只有 CSS 的解决方案。

4

1 回答 1

0

不幸的是，我认为您的视差效果不会在多个 div 上起作用。即使在工作示例中，无论您在哪个 div 中，第一张图片都会作为整个页面的背景。它只是被 div 1 和 2 覆盖。

我会看看以下关于制作多个 div 视差效果的链接：

纯 CSS 视差网站

希望这可以帮助！

于 2017-04-07T13:38:23.760 回答