CSS视差效果：如何仅转换部分的背景？

Question

我设法为一个部分的背景创建一个CSS视差效果，使其滚动速度比周围环境慢。 更确切地说，它为整个部分添加了一个translateZ，它与所有其他部分重叠。

这就是我的问题：我不希望整个部分比其他部分滚动得慢，我只想要背景图像来做到这一点。它上面的标题应正常滚动。

如何在背景图像上添加视差效果，而该部分的所有其他元素保持不会有任何滚动效果？

这是我的意思：

  WITH src AS (
    SELECT '2000' AS y FROM DUAL UNION ALL
    SELECT '1991' AS y FROM DUAL UNION ALL
    SELECT '20--' AS y FROM DUAL UNION ALL
    SELECT '09' AS y FROM DUAL UNION ALL
    SELECT '11' AS y FROM DUAL UNION ALL
    SELECT '95' AS y FROM DUAL
  )
  SELECT s.y, TO_NUMBER(REGEXP_SUBSTR(s.y, '^\d+$'))
    FROM src s;

.wrap {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 2px;
}

.section {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
    background: #fff;
    height: 50vh;
}

.section-content {
    background: rgba(255, 255, 255, 0.5);
    padding: 0 15px;
    z-index: 100;
}

.parallax {
    transform: translateZ(-1px) scale(2);
    z-index: 90;
}

.background {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 80;
}

.background-image {
    position: absolute;
    width: 100%;
}

.section .background img {
    width: 100%;
    top: -50vh;
    z-index: 90;
}

Answer 1

尝试添加＆＃34; parallax＆＃34;上课到＆＃34;背景＆＃34;而不是＆＃34;部分＆＃34;。

＆＃13;

＆＃13;

.wrap {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 2px;
}

.section {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: #fff;
  height: 50vh;
}

.section-content {
  background: rgba(255, 255, 255, 0.5);
  padding: 0 15px;
  z-index: 100;
}

.parallax {
  transform: translateZ(-1px) scale(2);
  z-index: 90;
}

.background {
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 80;
}

.background-image {
  position: absolute;
  width: 100%;
}

.section .background img {
  width: 100%;
  top: -50vh;
  z-index: 90;
}

＆＃13;

<div class="wrap">

  <div class="section section-md">
    <div class="section-content">
      Hello World
    </div>
  </div>

  <div class=" section ">
    <div class="background parallax">
      <div class="background-image ">
        <img src="http://story-teller-photography.de/upload/outland/convert/c857a6dc02e0e048a12d91f58cbeec39_1800_0.jpg">
      </div>
    </div>
    <div class="section-content">
      <h2>Heading</h2>
    </div>
  </div>

  <div class="section">
    <div class="section-content">
      Hello World
    </div>
  </div>

  <div class="section">
    <div class="section-content">
      Hello World
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;