您如何在网页上具有多个视差图像？

Question

我将多个视差图像放在我的Web应用程序上，并使用此方法保存在GPU上以在页面上呈现图像，但是当我添加多个视差图像时，它将一个图像应用于所有不同的视差类。我尝试更改不同视差类别的z-index，但发现它仅将最高编号的z-index类应用于所有视差类别。然后，我尝试以不同的顺序对z索引进行排序，但是无论它只拍摄了具有最高视差数的图像。

   .parallax { 
      /* The image used */
      padding-bottom: 400px;
      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;
          -webkit-filter: grayscale(100%);
          background: url('imgs/parallax/backPicture.png') no-repeat center center;
          background-size: cover;
          will-change: transform; // creates a new paint layer
          z-index: -1;
        }
    }

    .parallax2 { 

    padding-bottom: 400px;
    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;
          -webkit-filter: grayscale(100%);
          background: url('img/parallax/rijaadirect.png') no-repeat center center;
          background-size: cover;
          will-change: transform; // creates a new paint layer
          z-index: -2;
        }
    }