How to invert color of underlying div?

Question

I have two different divs, one on top of the other.

<div id="upper" style="background-color:transparent;z-index:2
                       width:15px;height:15px;
                       position:absolute;
                       top:0px;left:0px;
                       filter:invert(100%)"></div>
<div id="lower" style="background-color:#ff9900;z-index:1
                       width:100%;height:100px;
                       position:absolute;
                       top:0px;left:0px"></div>

The lower div can change color during time, the upper dive must get the lower color but inverted!

It seems easy but consider this condition: the upper div does not know what it has below itself, it can be more divs for example. In the scenario I wrote, I just made it easy, but I cannot select a particular element and get its color.

How to do?

In the example you saw I used filter:invert(100%) as I thought it could be the solution.

possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Paulie_D, Apr 11 '14 at 14:24
The background color for `#upper` is transparent. When you apply `filter: invert` on `transparent` it will still be `transparent`. There is no way to make an element to "know" what under it. However, there are many other ways to do it, such as using a ` — Derek 朕會功夫, Apr 11 '14 at 14:25
This is not a duplicate of that question. I told you that below you can have every possible div not strictly a parent in the DOM!!! — Andry, Apr 11 '14 at 14:26
So show us the full HTML them, CSS cannot affect elements higher in the DOM which, apparently, you are trying to do. If you can change the HTML structure...we can talk again. — Paulie_D, Apr 11 '14 at 14:29
Probably I explained it not correctly... also showing you the full html does not make sense. This is not a matter of DOM hierarchy but a matter of what comes upper of an object and lower to it! Just how graphical objects get stacked and this happens indipendently by the DOM hierarchy! — Andry, Apr 11 '14 at 14:31
If you plan to use canvas, you can look at this topic : http://stackoverflow.com/questions/7985722/using-javascript-or-jquery-how-can-i-get-the-rgb-color-where-ever-the-mouse-is — Apolo, Apr 11 '14 at 14:51

Kraang Prime · Answer 1 · 2014-04-11T14:48:36.687

0

Try this

<div id="upper" style="background-color:#ff9900;z-index:2;
                       width:15px;height:15px;
                       position:absolute;
                       top:0px;left:0px;
                       -webkit-filter:invert(100%);
                       filter:invert(100%);"></div>
<div id="lower" style="background-color:#ff9900;z-index:1;
                       width:100%;height:100px;
                       position:absolute;
                       top:0px;left:0px"></div>

Basically, as stated in the comments by 'Derek', you must have a color to invert. And also, from "Apolo", -webkit-filter:invert(), should also be used for webkit based browsers.

You can combine standard methods with -webkit methods for better cross browser support.

Please test here to make sure your browser supports this feature >> CSS3 Filter Tests

In my tests on jsFiddle, this doesn't appear to be supported in my version of FireFox (28.0)

edited Apr 11 '14 at 14:48

answered Apr 11 '14 at 14:29

Kraang Prime

9,981
10
58
124

standard property such as filter must be ***after*** vendor properties. =) – Apolo Apr 11 '14 at 14:38
and I'm pretty sure he needs to add a ';' after z-index properties – Apolo Apr 11 '14 at 14:39
you are correct. also, seems that invert doesn't function properly in firefox -.- – Kraang Prime Apr 11 '14 at 14:41
I know this can be done using JavaScript, however the OP was requesting a CSS solution. He will just need to be aware that this is not supported in all browsers. – Kraang Prime Apr 11 '14 at 14:49
@Michael - "upper dive must get the lower color but inverted!" .. the inversion on an upper div that is transparent will use the lower color for the value to invert. – Kraang Prime Jul 26 '18 at 05:25

score 0 · Answer 2 · answered Feb 13 '21 at 20:48

0

This will solve the issue

<div id="upper" style="z-index:2;
                       width:150px;height:200px;
                       position:absolute;
                       top:0px;left:0px;
                       backdrop-filter:invert(100%);
                       "></div>
<div id="lower" style="background-color:#ff9900;z-index:1;
                       width:100%;height:100px;
                       position:absolute;
                       top:0px;left:0px"></div>

answered Feb 13 '21 at 20:48

HxX

1

please explain your answer – phoenixstudio Feb 13 '21 at 22:05
in Firefox, this doesn't work unless I manually go into about:config and set both `gfx.webrender.all` and `layout.css.backdrop-filter.enabled` to "true". This is fine for myself, but how do I get everybody who visits my web site to do this? – Michael Oct 12 '21 at 19:45

How to invert color of underlying div?

2 Answers2