CSS3 - 固定透明导航：有没有办法根据元素的实际可见背景为元素着色？

Question

对于某些项目，我希望有一个透明的固定导航，其包含的元素的颜色取决于当前的底层背景颜色。

这意味着在最简单的情况下：取决于滚动 - 对于导航中的每个元素或文本 - 如果当前可见背景大部分是暗的，则将其着色为白色 - 否则将其着色为黑色。

有一个库完全按照我描述的图像 - 查看以下示例：http://www.kennethcachia.com/background-check/fixed-nav.html

图书馆在这里托管：https://github.com/kennethcachia/background-check

然而，对于比图像悬停更多的导航，这看起来非常复杂，因为要找到导航元素当前悬停的父元素并不容易。

CSS和/或Javascript / JQuery中是否有一种方法可以根据 实际可见背景 为元素着色？

为了说明我的意思，还有一个例子：

由于用户滚动，菜单按钮当前位于深色背景上 - 因此将其变为白色：

由于用户滚动，当前菜单按钮位于白色背景上 - 因此颜色为金色：

下面的代码片段显示了我想要实现的内容 - 如果我的固定导航系统悬停一个白色元素使其变黑 - 如果它悬停一个黑色元素使其变为白色 - 如果它悬停一个图像使其依赖于图像像素（这是我可以通过图书馆实现的。）

＆＃13;

＆＃13;

body {
  background-color:blue;
}

/* If I am on a white or light background, make my color black */
#menu {
  color:white;
  position:fixed;
}

#first {
  height:100px;
  background-color:black;
}

#bar {
  height:100px;
  background-color:white;
}

＆＃13;

<div id="menu">
I AM THE MENU - make me black if I am on a white background or on a light image
</div>

<div id="first"></div>

<div id="second">
  <div id="foo">
    <div id="bar"></div>
  </div>
</div>

<div id="third">
  <img src="https://i.stack.imgur.com/mx2yL.jpg" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用脚本执行此操作会非常糟糕，所以我会使用mix-blend-mode，然后使用不支持的浏览器的后备，即设置半透明背景。

body {
  background-color:blue;
}

/* If I am on a white or light background, make my color black */
#menu {
  mix-blend-mode: exclusion;             /*  added  */
  color:white;
  position:fixed;
}

#first {
  height:100px;
  background-color:black;
}

#bar {
  height:100px;
  background-color:white;
}

<div id="menu">
I AM THE MENU
</div>

<div id="first"></div>

<div id="second">
  <div id="foo">
    <div id="bar"></div>
  </div>
</div>

<div id="third">
  <img src="https://i.stack.imgur.com/mx2yL.jpg" />
</div>