沒有元素的CSS蒙版沒有圖像？

Question

問題：
我有一組用於導航的“選項卡”，我想向活動的選項卡中添加“遮罩”類。我的目標是揭示BODY的背景顏色和/或頁面的背景圖像，但僅限於此“活動”標簽。 由於主體的背景頁面是動態的並且總是在變化，因此我不能簡單地將背景顏色添加到“活動標簽”中並稱之為一天。 我必須使用另一種技術（javascript是不得已的方法，我只想使用CSS）。

要求：

• 我無法使用圖像作為蒙版，因為“標簽”寬度是使用FlexBox顯示的CSS，並在頁面上延伸。
• 我必須使用僅掩蓋ELEMENTS的解決方案...在這種情況下： <div class="mask"></div>
• 我無法重新排列下面的HTML結構。.我必須使用此布局。

---

是否可以使用CSS蒙版，還是有更好的方法使用其他CSS技術來實現此目的？

小提琴： https : //jsfiddle.net/oneeezy/7mj8voL8/

---

碼：

 * { margin: 0; padding: 0; box-sizing: border-box; } /* Body */ body { background-color: rgb(0, 121, 191); } /* Header */ h1 { color: white; } header { background-color: rgba(0,0,0, .15); padding: 20px 20px 0; } header nav { display: flex; } header nav div { flex: 1; color: white; background: rgba(0,0,0, .1); margin: 10px 10px 0; padding: 10px; border-radius: 10px 10px 0 0; } /* Mask (without image?) */ header nav div.mask { background: rgba(0,0,0, .1); } /* Can mask reveal background color? */ /* Main */ main { padding: 20px 20px 0; } h2 { color: rgba(0,0,0, .54); } 

 <header> <h1>Logo</h1> <nav> <div class="mask">Link (mask)</div> <div class="">Link</div> <div class="">Link</div> </nav> </header> <main> <h2>CSS Masking</h2> <p>Possible to css mask without an image? Hmmmmmm.......</p> <p>I want to reveal the color of the BODY's background on the DIV that has the class "mask"</p> </main> 

Answer 1

如果始終有一個活動元素，而只有一個活動元素，則可以在其上設置陰影以獲得所需的效果（而不是標題上的背景）

 * { margin: 0; padding: 0; box-sizing: border-box; } /* Body */ body { background: repeating-linear-gradient(90deg, lightblue 0px, lightgreen 100px); } /* Header */ h1 { color: white; } header { padding: 20px 20px 0; } header nav { display: flex; } header nav div { flex: 1; color: white; background: rgba(0,0,0, .1); margin: 10px 10px 0; padding: 10px; border-radius: 10px 10px 0 0; } /* create a shdow on the underlying element, reset the default bkg */ header nav div.mask { box-shadow: 0px -1000px 0px 1000px rgba(0,0,0, .1); background-color: transparent; } /* Main */ main { padding: 20px 20px 0; } h2 { color: rgba(0,0,0, .54); } 

 <header> <h1>Logo</h1> <nav> <div class="mask">Link (mask)</div> <div class="">Link</div> <div class="">Link</div> </nav> </header> <main> <h2>CSS Masking</h2> <p>Possible to css mask without an image? Hmmmmmm.......</p> <p>I want to reveal the color of the BODY's background on the DIV that has the class "mask"</p> </main>