javascript - 如何反转底层div的颜色？

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 不知道它下面有什么，例如它可以是更多的 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”在评论中所述，您必须要反转颜色。而且，来自“Apolo”的 -webkit-filter:invert() 也应该用于基于 webkit 的浏览器。

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

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

在我对 jsFiddle 的测试中，我的 FireFox (28.0) 版本似乎不支持它