javascript - 在 div 内的图像上放置悬停视差？

Question

我有一个视差悬停部分，位于一些文本和 CSS 背景图像之上。我遇到的问题是该部分没有在我的 div/header 内齐平，更糟糕的是，当我使用 position: absolute 时。我想知道是否有一种方法可以将标题部分分层，以便图像位于后面，文本在上面，然后视差在上面？我试过 z-indexing 没有运气，视差部分就在我的标题的角落。

我正在尝试实现这样的目标：https ://www.byalicelee.com/slack但其中包含 CSS 背景图像和文本。我将尝试制作一个 codepen 来详细说明，但与此同时，这就是我所拥有的：

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

header {
  height: 100vh;
  background-image: url(img/image.png);
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  z-index: 0;
}

header .row {
  width: 1150px;
}

header .new-section__white {
  background-color: transparent;
  justify-content: center;
}

.hero {
  width: 100vw;
}

.hero h2 {
  font-weight: 100;
  font-size: 20px;
}

.hero img {
  width: 100%;
}

header .section-parallax {
  /*    position: absolute;*/
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.js"></script>
<header>
  <!-- ~~~ HEADER -->
  <section class="hero new-section__white">
    <div class="row new-section__inner">
      <div class="col span-1-of-2">
        <h1>Some Text - Page Title</h1>
      </div>
    </div>
  </section>
  <!-- ~~~ parallax -->
  <section class="section-parallax">
    <div id="scene">
      <div data-depth="0.2">
        <img class="yellow" src="resources/img/p1.png" alt="parallax header">
      </div>
      <div data-depth="0.4">
        <img class="purple" src="resources/img/p2.png" alt="parallax header">
      </div>
      <div data-depth="0.6">
        <img class="window" src="resources/img/p3.png" alt="parallax header">
      </div>
      <div data-depth="0.2">
        <img class="windowsquare" src="resources/img/p4.png" alt="parallax header">
      </div>
      <div data-depth="0.4">
        <img class="circle2" src="resources/img/p5.png" alt="parallax header">
      </div>
    </div>
  </section>
</header>

标签： javascripthtmlcssparallaxparallax.js