Question

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

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

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

我在jsfiddle中包括了我的幼稚尝试，当id="NEST_ME"是id="INSIDE_HERE"的子代时，内部视差效果被破坏了。

这是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"元素中，您的小提琴中的第27行：https://jsfiddle.net/bc4umhxv/3/

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

我可以嵌套CSS视差组吗？

1 个答案: