javascript - 更改 parent 背景颜色的 div 颜色

Question

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

在这个例子中，它通过告诉它在(例如)document.height() 处更改 background-color 来与 javascript 一起工作。但我也希望它在经过图像时反转颜色。

有没有办法做到这一点？使用 :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>