在固定導航欄下滾動時減少內容的不透明度

Question

因此，我試圖在某些div（在腳本和導航欄中）將內容從不透明轉換爲透明，並保持其背景透明以避免重疊的內容，以及將頁面的一般背景作爲背景。

例如 - 這裏是我們的頁面：

目前，當我們滾動 - 我們有這樣的;

但我想它在這樣的方式：

請注意：頁面的背景可以是固定的梯度或壁紙，不平坦的顏色和導航欄/頁腳沒有背景。

如何做到這一點？

---

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