更改父母背景颜色的div颜色

Question

我正在尝试根据其背景颜色更改多维数据集。我希望这可以通过为元素提供一些透明背景和过滤器来反转其父背景的颜色来实现。但是，当然，它只是颠倒了自己的颜色。

在此示例中，它通过告诉javascript background-color在（例如）处进行更改来与javascript一起使用document.height()。但是我也希望它在图像上显示时反转颜色。

有没有办法做到这一点？有了:hover您可以做的事情像.section1:hover cube{ ... }这样，也许有伪元素:overlaying吗？

.cube{
  position: fixed;
  height: 50px;
  width: 50px;
  left: calc( 50vw - 25px );
  bottom: 50px;
  background-color: RGBA(255,255,255, .2);
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.section{
  height: 600px;
  width: 100vw;
}

.section1{
  background-color: #AAAAFF;
}

.section2{
  background-color: #FFAAAA;
}

.section3{
  background-color: #AAFFAA;
}

<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>

<div class="cube"></div>

Answer 1

也许您正在寻找mix-blend-mode：

.cube {
  position: fixed;
  height: 50px;
  width: 50px;
  left: calc( 50vw - 25px);
  bottom: 50px;
  background-color: RGBA(255, 255, 255);
  mix-blend-mode: difference;
}

.section {
  height: 600px;
  width: 100vw;
}

.section1 {
  background-color: #AAAAFF;
}

.section2 {
  background-color: #FFAAAA;
}

.section3 {
  background-color: #AAFFAA;
}

<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>

<div class="cube"></div>