我可以嵌套CSS视差组吗?

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

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

我有一个静态元素,它的子元素中有视差背景图像。我想让外部元素也有视差效应。

我把我的幼稚尝试包括在jsiddle中,当 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。