html - 我可以嵌套 CSS 视差组吗？

Question

jsfiddle:https://jsfiddle.net/c3fveqgz/1/

改编自:https://keithclark.co.uk/articles/pure-css-parallax-websites/

我有一个静态元素，其子元素具有视差背景图像。我想让那个外部元素也有视差效果。

我在 jsfiddle 中加入了我天真的尝试，当 id="NEST_ME" 是 id="INSIDE_HERE" 的 child 时，内部视差效果被打破.

这是 HTML:

<div class="parallax-wrap">
  <div id="NEST_ME" class="parallax-view-wrap" style="height:60vh;">
    <div class="parallax-view" style="top:0; bottom:40vh">
      <div class="parallax-group">
        <div class="parallax-back cat-img"></div>
      </div>
    </div>
    <div class="parallax-view" style="top:20vh; bottom:20vh">
      <div class="parallax-group">
        <div class="parallax-back cat-img"></div>
      </div>
    </div>
    <div class="parallax-view" style="top:40vh; bottom:0;">
      <div class="parallax-group">
        <div class="parallax-back cat-img"></div>
      </div>
    </div>
  </div>

  <div class="parallax-group">
    <div id="INSIDE_HERE" class="parallax-fore cat-img"></div>
  </div>
</div>

您可以在 jsfiddle 链接中查看 CSS。

Answer 1

如果您将 parallax-group 类添加到 id="INSIDE_HERE" 元素，您的 fiddle 中的第 27 行:https://jsfiddle.net/bc4umhxv/3/

这似乎与您在父元素上需要的 transform-style: preserve-3d; 属性有关。