Question

我有两个不同的div，一个在另一个之上。

<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>

下部div可以在时间内改变颜色，上部潜水必须得到较低颜色但反转！

看起来很容易，但考虑一下这个条件：上面的div不知道它下面有什么，例如，它可以是更多的div。在我写的场景中，我只是简单易行，但我不能选择一个特定的元素并获得它的颜色。

怎么办？

在示例中，您看到我使用了filter:invert(100%)因为我认为它可能是解决方案。

Answer 1

试试这个

<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>

基本上，正如Derek＆＃39;的评论中所述，您必须有一种颜色可以反转。此外，来自＆＃34; Apolo＆＃34;， - webkit-filter：invert（），也应该用于基于webkit的浏览器。

您可以将标准方法与-webkit方法结合使用，以获得更好的跨浏览器支持。

请在此处测试，以确保您的浏览器支持此功能＆gt;＆gt; CSS3 Filter Tests

在我对jsFiddle的测试中，我的FireFox版本（28.0）似乎不支持此功能

Answer 2

这将解决问题

<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>

如何反转底层div的颜色？

2 个答案: