创建具有视差效果的css图像网格

通过以下方法可以相对简单地获得基本的全浏览器视差背景图像：

    <div class = "parallax">
<!--image here -->
    </div>

.parallex{
  background: url(*url*);
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
}

---

但这并不奏效。有什么建议吗？

我不相信css网格是正确的标记，因为我认为您想要的是一个实际的元素网格，而不是css网格。除此之外，我敢打赌你看不到视差效果的原因是因为你试图看到孩子们相对于他们固定的父母滚动。家长会带着孩子一起去。你需要将两者分开。我不相信css网格是正确的标记，因为我认为你想要的是一个真正的元素网格，而不是css网格。除此之外，我敢打赌你看不到视差效果的原因是因为你试图看到孩子们相对于他们固定的父母滚动。家长会带着孩子一起去。你需要把两者分开。

 <div class = "parallax">
      <div id = "img1">
      </div>
      <div id = "img2">
      </div>
      <div id = "img3">
      </div>
      <!--etc-->
   </div>

.parallex{
background-size: cover;
background-attachment: fixed;
height: 100vh;
   }
#image1{
background-image: url(*url1*);
}
#image2{
background-image: url(*url2*);
}