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

Question

基本的完整的浏览器视差背景图片可以通过以下相对简单的方式获得：

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

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

我尝试将网格项放在.parallax div中，并在这些项上设置单独的background-image值：

 <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*);
}

但是没有用。有什么建议吗？