如何反轉底層div的顏色？

我有兩個不同的div，一個在另一個之上。如何反轉底層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%)，因爲我認爲這可能是解決方案。

來源

2014-04-11 Andry

可能重複的得到支持[是否有CSS父選擇器？]（http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector） –

我認爲它是'-webkit-filter：invert（）;' – Apolo

'＃upper'的背景顏色是透明的。當你在'透明'上應用'filter：invert'時，它仍然是'透明的'。沒有辦法讓一個元素「知道」它下面的內容。然而，還有很多其他的方法可以做到，比如使用'

試試這個

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

基本上，在由「德里克」的評論說，你必須有一個顏色顛倒。另外，從「Apolo」，-webkit-filter：invert（），也應該用於基於webkit的瀏覽器。

您可以將標準方法與-webkit方法結合使用，以獲得更好的跨瀏覽器支持。

請測試在這裏確保瀏覽器支持此功能>>CSS3 Filter Tests

在我上的jsfiddle測試，這不會出現在我的版本的Firefox（28.0）

來源

2014-04-11 14:29:25

標準屬性如過濾器必須*** ***供應商屬性後***。 =） – Apolo

，我很確定他需要添加';'之後z-index屬性 – Apolo

你是對的。此外，似乎反轉功能在firefox中不能正常工作-.- –

如何反轉底層div的顏色？

回答

相關問題