CSS несколько фиксированных фоновых элементов psuedo

Question

Я пытаюсь создать эффект прокрутки параллакса, используя только 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.

Answer 1

К сожалению, я не думаю, что ваш эффект параллакса сработает более чем на одном div. Даже в рабочем примере первое изображение остается фоном для всей страницы, независимо от того, в каком разделе вы находитесь. Оно просто покрывается элементами 1 и 2.

Я хотел бы взглянуть на следующую ссылку о создании нескольких эффектов параллакса div:

Чистый CSS Параллакс Сайты

Надеюсь это поможет!