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

Question

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

Answer 1

HTML

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

CSS：

.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; 
  }

这会使#fixed背景仅在窗口向下滚动后显示...