Question

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

在此示例中，它通过告知j更改background-color（例如）document.height()来使用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>

在父母背景颜色上更改div颜色

1 个答案: