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 背景仅在窗口向下滚动后显示...