Как у вас есть несколько изображений параллакса на веб-странице?

Question

Я помещаю несколько изображений параллакса в свое веб-приложение и использую этот метод для сохранения в графическом процессоре для отображения изображения на странице, но когда я добавляю несколько изображений параллакса, он применяет одно изображение ко всем различным классам для параллакса. Я попытался изменить z-индекс для различных классов параллакса и обнаружил, что он применяет только класс z-индекса с наибольшим числом ко всем классам параллакса. Затем я попытался упорядочить 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;
        }
    }