根据当前背景更改固定 div 的背景答案

【问题标题】：Change background of a fixed div based on it's current background根据当前背景更改固定 div 的背景
【发布时间】：2018-01-30 18:03:27
【问题描述】：

当您在我的屏幕一侧滚动时，我有一个固定的 div 跟随您，我想根据它的当前背景更改它的背景。因此，例如，当 div 在白色背景上时，它被设置为background-color: gray，而当它在灰色背景上时，它将被设置为background-color: white

我还希望它在您滚动到另一种背景颜色时更改颜色，而不是使用尝试更改颜色时需要单击的按钮。

我在这里做了一个小示例：

.background1{
  background-color: #777777;
  height: 300px;
  width: 100%;
  padding: 50px 200px;
  box-sizing: border-box;
}

.background2{
  background-color: #444444;
  height: 300px;
  width: 100%;
  padding: 50px 200px;
  box-sizing: border-box;
}

.background3{
  background-color: #dddddd;
  height: 300px;
  width: 100%;
  padding: 50px 200px;
  box-sizing: border-box;
}

.background4{
  background-color: #bbbbbb;
  height: 300px;
  width: 100%;
  padding: 50px 200px;
  box-sizing: border-box;
  margin-bottom: 500px;
}

.example-color1{
  color: white;
  font-weight: bold;
  background-color:  #444444;
  width: 100px;
  height: 100px;
  padding: 10px;
}

.example-color2{
  color: white;
  font-weight: bold;
  background-color:  #cccccc;
  width: 100px;
  height: 100px;
  padding: 10px;
}

.example-color3{
  color: white;
  font-weight: bold;
  background-color:  #666666;
  width: 100px;
  height: 100px;
  padding: 10px;
}

.example-color4{
  color: white;
  font-weight: bold;
  background-color:  #999999;
  width: 100px;
  height: 100px;
  padding: 10px;
}

.fixed-background{
  position: fixed;
  top: 55px;
  left: 30px;
  background-color: white;
  height: 100px;
  width: 100px;
  border: 1px black solid;
  padding: 10px;
}

<div class="background1"><div class="example-color1">For example this color on this block</div></div>
<div class="background2"><div class="example-color2">For example this color on this block</div></div>
<div class="background3"><div class="example-color3">For example this color on this block</div></div>
<div class="background4"><div class="example-color4">For example this color on this block</div></div>
<div class="fixed-background">This should change color based on background</div>

【问题讨论】：

Changing background color of a div based on background color of some other div的可能重复
@ArjanKnol 我希望找到一种方法，我不必使用 JQuerry
您可以使用透明度，但不会获得这些预期结果。 background: rgba(0,0,0,0.5);。我认为只有使用 CSS 才能做到这一点。
使用 JQuerry 会很好，但我不太了解 JQuerry，就像 ArjanKnol 给我的链接中的答案一样，我不知道如何在我自己的代码中使用它（或在示例代码中）
@Minegolfer 这是不可能的，css 只用于样式。

标签： css

【解决方案1】：

添加某种过滤器（查看所有过滤器here）和不透明的背景就可以了。

.fixed background{
    background-color: RGBA(0,0,0,0.5);
    filter: hue-rotate(90deg);
}

效果很好:D

【讨论】：

看起来您仍然需要一些 js 来根据固定 div 当前所在的背景更改颜色