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

Question

当我在屏幕的一侧滚动时，我有一个固定的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>

Answer 1

添加某种过滤器（请参阅所有过滤器here）和具有不透明度的背景可以完成这项工作。

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

工作得非常好：D