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>

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

0 个答案: