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

Posted 2023-02-25

【中文标题】没有图像的元素上的CSS掩码？

【英文标题】：CSS mask on element w/ no image?

【发布时间】：2016-03-17 11:29:30

【问题描述】：

问题： 我有一组用于导航的“选项卡”，我想向处于活动状态的选项卡添加一个“掩码”类。我的目标是显示页面的 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>

【问题讨论】：

如果您的身体背景是纯色，您只需将相同的颜色分配给.mask 类。然而，如果你有一个背景图片就很困难——因为你也为<header>元素设置了一个背景，CSS掩码是行不通的（至少在<div class="mask">的级别，因为它只会显示父元素背景（暗淡的标题背景）而不是根背景（正文背景）。您可能需要重新考虑您的设计和/或标记选项。

这实际上是为 Trello 扩展创建的。如果我可以重写其中的一些 HTML，那就太棒了，但不是一个选项。我明白你的意思，它只显示父母的背景颜色变暗.. 嗯....

您唯一的机会是 javascript，您必须聆听影响 div 位置和背景（css、调整大小、滚动）的每一个变化，并重新计算背景剪辑的偏移量。这样做很容易，但性能可能不如预期。

是的..这可能有点性能紧张。我尝试过的一种技术......理论上似乎可行（但失败了）：为标签背景应用白色透明“rgba（255,255,255，.15）”（相反的黑色暗色）以使其具有“自然”颜色回来..虽然它很接近，但我对透明度和颜色如何运作的了解已经不足哈哈..

你知道我能做什么吗？使用边距将“标签”层推到身体上。这有点 hacky，我讨厌这个想法，真的……但如果我可以在元素上使用蒙版效果，这可能会奏效。

【参考方案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>

【讨论】：

您的代码在整个页面上产生了一个重复的渐变。我想我理解您的方法，但我不确定您的代码结果是否符合您的说法：i.imgur.com/mTl20Ap.png

我改变了身体的背景，让身体更清楚。改回原来的就好了，结果应该没问题