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

Question

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

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

有一个库完全符合我对图像的描述 - 看看下面的例子：http://www.kennethcachia.com/background-check/fixed-nav.html

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

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

在 CSS 和/或 Javascript/JQuery 中是否有办法根据元素的实际可见背景为元素着色？

再举一个例子来说明我的意思：

由于用户滚动菜单按钮当前处于深色背景上 - 所以将其涂成白色：

由于用户滚动菜单按钮当前处于白色背景 - 所以将其涂成金色：

以下 sn-p 显示了我想要实现的目标 - 如果我的固定导航悬停白色元素使其变为黑色 - 如果悬停黑色元素使其变为白色 - 如果悬停图像使其取决于图像像素（这是我可以通过图书馆实现的）。

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;
}

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

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>