javascript - 没有图像的元素上的 CSS 掩码？

Question

问题:
我有一组用于导航的“选项卡”，我想向事件的选项卡添加一个“掩码”类。我的目标是显示 BODY 的背景颜色和/或页面的背景图像，但仅限于此“事件”选项卡。由于正文的背景页面是动态的并且总是在变化，我不能简单地向“事件选项卡”添加背景颜色然后就此结束。我必须使用不同的技术(javascript 是最后的手段，我只想使用 CSS 来实现)。

要求:

• 我不能使用图像作为 mask ，因为“标签”宽度是用 flexbox 显示的 css，并在整个页面上拉伸(stretch)。
• 我必须使用仅屏蔽 ELEMENTS 的解决方案...在这种情况下: <div class="mask"></div>
• 我不能重新排列下面的 HTML 结构..我必须工作/这种布局。

---

这是可能的 w/css 掩码还是有更好的方法来使用不同的 css 技术来实现这一点？

fiddle :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>