没有图像的元素上的CSS掩码

CSS mask on element w/ no image?

本文关键字：CSS 掩码 元素 图像      更新时间：2023-09-26

>问题：
我有一组用于导航的"选项卡"，我想将"mask"类添加到处于活动状态的选项卡中。我的目标是显示页面的BODY背景颜色和/或背景图像，但仅限于此"活动"选项卡。由于正文的背景页面是动态的并且总是在变化，因此我不能简单地在"活动选项卡"中添加背景颜色并称之为一天。我必须使用不同的技术（javascript是最后的手段，我只想用CSS来做这件事）。

要求：

  • 我不能将图像用于蒙版，因为"选项卡"宽度是带有弹性框的 CSS 显示，并在整个页面上拉伸。
  • 我必须使用仅屏蔽元素的解决方案...在这种情况下： <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>

如果总是有一个活动元素，并且只有一个活动元素，您可以在其上设置阴影以获得所需的效果（而不是标题上的背景）

* { 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>

相关文章：