重疊的透明背景

我已經設置了兩個div元素，其中半透明漸變背景設置爲其中一個，彼此重疊。其中之一是標頭的高z-index和半透明漸變，另一個是導航欄。兩種div顏色混合並且都顯示在標題上。重疊的透明背景

如何只顯示標題？我到處尋找，但我不知道該怎麼做。

下面是代碼：

#container { 
    position: relative; 
    height: 100vh; 
    box-sizing: border-box; 
    background-color: DodgerBlue; 
} 
#header { 
    position: relative; 
    margin: 0 auto; 
    height: 80px; 
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%); 
    box-sizing: border-box; 
    border-radius: 0 0 20% 30%; 
    z-index: 1; 
} 
#nav { 
    position: absolute; 
    top: 0; 
    left: calc(15% + .5px); 
    width: 10%; 
    height: 100%; 
    box-sizing: border-box; 
    background-color: cornflowerblue; 
}

而且一峯解釋，其中的問題：

來源

2016-01-26 user5842084

不這樣做正是你告訴它做什麼？您設置透明度，因此您可以看到底層元素。如果你不希望你需要在沒有透明度的情況下工作，並使用不同的藍色色調 – Fester

在這裏有更多的選擇，將你的第二個背景放在你的標題下方，爲這個部分分別使用不同的色調。然後應用背景圖像 –

您可以嘗試在您的'＃nav'上應用漸變，使它從底部是'cornflowerblue'，頂部是'DodgerBlue'，這樣就可以實現與背景相同的顏色，這將使它看起來透明。 – AGE

好吧，所以我找到了這種情況的解決方案。您需要創建另一個div（我在示例中給出了id="header_glow"），使其與標題div的尺寸相同，並且僅爲此div設置background: linear-gradient。標題div應該有純色背景。同時給予div s z-index，它們彼此相等並且大於導航z-index。

CSS代碼：

#header { 
    position: relative; 
    margin: 0 auto; 
    height: 80px; 
    background-color: DodgerBlue; 
    border-radius: 0 0 20% 20%; 
    z-index: 1; 
} 
#header_glow { 
    position: absolute; 
    margin: 0 auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 80px; 
    border-radius: 0 0 20% 20%; 
    background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%); 
    z-index: 1; 
} 
#nav { 
    position: absolute; 
    top: 0; 
    left: calc(15% + .5px); 
    width: 10%; 
    height: 100%; 
    background-color: cornflowerblue; 
}

See Attached pic

來源

2016-01-26 18:46:07 user5842084