在父母背景颜色上更改div颜色 [英] Change div color on parents background-color

问题描述

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

I am trying to make a cube change based on its background color. I hoped this was possible by giving an element a bit of a transparent background and a filter to invert the color of its parent background. But of course, it just inverts its own color.

在这个例子中，它通过告诉它改变 background-color at（例如） document.height（）。但我也想让它在图像上方反转颜色。

In this example, it works with javascript by telling it to change background-color at (for example) document.height(). But I also want it to invert the color when it goes over an image.

是否有某种方法可以做到这一点？使用：hover 你可以做一些像 .section1：hover cube {...} 那么可能有一个伪 - 像这样的元素：覆盖？

Is there maybe some way to do this? With :hover you can do stuff like .section1:hover cube{ ... } so is there maybe a pseudo-element like :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>

推荐答案

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

Maybe you are looking for 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颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！