固定ナビゲーションバーの下でスクロールされたときのコンテンツの不透明度を下げる

Question

私はいくつかのdiv（ouケース - フッターとnavbar）の下で不透明から透明にコンテンツをうまく移行しようとしていて、ページの一般的な背景をバックグラウンドとして維持することができます。 - 例えば

こちらのページです：私たちはスクロール

現在、 - 私たちはこれを持っているが、

しかし、私はこのような方法でそれをしたい：

をメモ：ページの背景には、一定の勾配や壁紙、ないフラットな色かもしれない、とナビゲーションバー/フッタには、バックグラウンドを持っていません。

これを行う方法？

---

UPD：見ての通り、物事を明確にするために、ここで

契約だ - 同じBGRとヘッダと以下の100から0への勾配」のようなソリューションをヘッダーの背景が垂直に引き伸ばされたときにページの背景と一致しないため、この場合「ヘッダー」は機能しません。だからこそ私はヘッダ/フッタの下で不透明度を滑らかに減少させたいのです。 少なくともヘッダーとフッターにページのものと同じサイズの背景グラデーションをマスクすることが可能な場合は、これを歓迎します。たぶん、私はハードコア以外のソリューションがない場合、このアイデアを捨ててしまうだろう。

Answer 1

は私がちょうど作っこれを見て...個人的に

https://jsfiddle.net/5kmobuf7/2/

#header { 
    width: 100%; 
    height: 50px; 
    background-color: #4b5852; 
    color: white; 
    box-shadow: 0px 30px 10px #4b5852; 
    position: fixed; 
    z-index: 3; 
} 

body { 
    background-color: #4b5852; 
    margin: 0; 
} 

#content { 
    color: white; 
    width: 100%; 
    margin-top: 200px; 
    text-align: center; 
    font-size: 20px; 
    position: absolute; 
} 

Answer 2

を持っている私は、ヘッダここ

上の勾配を使用することをお勧めします証明するフィドルです：https://jsfiddle.net/ve806t1a/

ここに使用したコードは次のとおりです。

の

<p class="header"> 
HEADER 
</p> 
<div class="header-bg"></div> 

<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 
<p> 
CONTENT 
</p> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-color: rgba(198, 115, 115, 1); 
} 
.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 20; 
    background-color: rgba(198, 115, 115, 1); 
} 
.header-bg { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    height: 100px; 
    width: 100%; 
    background-image:linear-gradient(rgba(198, 115, 115, 1),rgba(47, 52, 172, 0)); 
} 

p { 
    text-align: center; 
    padding: 20px 0; 
}