CSS-如何在滚动图像上制作固定背景图像？

我在顶部有一个带有图像的导航栏。理想情况下，导航栏图像位于背景图像上方，向下滚动时消失。任何可能的方法（2个背景图像1个滚动另一个固定）

HTML

<div id="scroll" class="nav">Scrolling</div>
<div id="fixed" class="nav">Fixed</div>

这将使“固定背景”仅在向下滚动窗口后显示…

您的相关内容是什么/HTML？

.nav {
    top: 0; 
      left: 0; 
      height: 100px; // position and size only example, adjust to your needs
      width: 100%;
}
#scroll { 
      position: absolute; 
      background: url(yourimage.png); 
      z-index:1;  
 }
#fixed { 
     position: fixed; 
     background: url(your2ndimage.png); 
     z-index:0; 
  }