css - CSS - スクロールする画像の上に固定の背景画像を作成する方法は?

Question

上部に画像付きのナビゲーション バーがあります。理想的には、このナビゲーション バーの画像は背景画像の上に表示され、下にスクロールすると消えます。これを可能にする方法（2つの背景画像1つはスクロールし、もう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 背景が表示されます...