如何根据背景内容的颜色改变固定元素的颜色？答案

【问题标题】：How to change color of fixed element depending on the color of background content?如何根据背景内容的颜色改变固定元素的颜色？
【发布时间】：2021-10-11 08:33:15
【问题描述】：

我在页面上有一个固定的元素和很多不同的内容。我需要这个固定元素变成黑色或白色，这取决于滚动时它背面的主色。

怎么做？我不知道页面部分的高度是多少，页面的第一部分是什么颜色，如果有帮助的话，我正在使用 vue/nuxt。

.section {
  border: 1px solid red;
  min-height: 300px;
}

.section_type_white {
  background-color: white;
}

.section_type_blue {
  background-color: blue;
}

.section_type_yellow {
  background-color: yellow;
}

.section_type_black {
  background-color: black;
}

.section_type_red {
  background-color: red;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}

.fixed-element {
  width: 150px;
  height: 50px;
  background-color: white;
/*   border: 1px solid black; */
  position: fixed;
  left: 50px;
  top: 20px;
  mix-blend-mode: difference;
}

<div class="fixed-element"></div>

<section class="page">
  <section class="section section_type_blue"></section>
  <section class="section section_type_white"></section>
  <section class="section section_type_image">
    <img class="image" src="https://yobte.ru/uploads/posts/2019-11/devushki-v-sinih-platjah-82-foto-15.jpg"
  </section>
  <section class="section section_type_yellow"></section>
  <section class="section section_type_black"></section>
  <section class="section section_type_red"></section>
</section>

【问题讨论】：

我有一个想法，但我想问一下——当底层背景是红色时，你期望什么颜色的背景？还是黄色的？还是白色/黑色以外的任何东西（很明显）？
@NickDawes 我希望这个问题可以由脚本处理。我认为黑色在黄色等浅色背景上会更好看，反之亦然，白色更适合蓝色或深色背景。我曾经在 youtube 上看到过一个教程如何教元素识别无论背景是浅色还是不使用神经网络，但我找不到它。而且我不确定我是否可以处理神经网络）
我能建议的最好的方法是使用 CSS 的背景过滤器，并按顺序应用 saturation(0) 和 invert(1) 函数。第一个将耗尽背景中的所有颜色，第二个将反转背景以对比下面的内容。这适用于完美的黑色或白色背景，但对于其他任何东西（蓝色、黄色等），您最终都会得到灰色阴影。我相信它提供了足够的对比度，但如果你的设计绝对有必要实现黑色或白色，恐怕我想不出任何解决方案。

标签： javascript css scroll colors mix-blend-mode

【解决方案1】：

查看 jQuery 的颜色小偷插件。您可以使用它获得主要颜色甚至是图像的调色板，并尝试反转固定元素颜色或相应地移动它。一些参考是here、here 和here。

【讨论】：