没有图像的元素上的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>