Webkit un-invert invert（）圖像？

我在我的CSS中的一些圖像上使用了invert（），它將它們反轉爲正確的，但是（這裏是我的問題），當我再次對它們運行invert（）以使它們恢復正常時，它們不完全相同。亮度或對比度變化，他們有點被淘汰。爲什麼是這樣以及它是什麼方式？是否有revert（）函數的種類？什麼是invert（）對圖像做些什麼？Webkit un-invert invert（）圖像？

TIA！

UPDATE;這是瞭解問題的最佳方式（帶註釋）：http://jsbin.com/uzicaz/2/edit

來源

2013-03-29 Catalyst

你可以發佈一個示例圖片的鏈接嗎？ – user1118321

像這樣：http://jsfiddle.net/3qDpx/2/ jsfiddle似乎並不運行invert（），但它會被執行兩次的圖像;這應該恢復它，而不是洗掉它 – Catalyst

嘗試在鉻中運行相同的代碼。看看你是否得到相同的結果 –

您正在應用使用兩個不同選擇器的相同CSS指令。

當你這樣做時，指令不會被應用兩次。其中一人被通過其他重寫：

enter image description here

越少顯著一個被取消，更顯著一個應用。但是兩者是相同的，所以指令只適用一次。

要取消第一個聲明，而無需再次重新應用它，在第二個聲明指令設置爲none：

img { 
    -webkit-filter: invert() brightness(100%) contrast(100%); 
} 

#photo1 { 
    -webkit-filter: none; 
}

PS的invert() brightness(100%) contrast(100%)組合對我產生一個空白的白色圖像。如果您打算將其設爲空白，請改爲使用visibility: hidden;。

來源

2013-03-29 07:09:04

對不起，我遲到了，但這真棒，我不知道我可以使用「無」，而不是「重新顛倒」。謝謝，我會在AM中對它進行測試，並在這裏發回，以防其他人有這個相同的問題。 – Catalyst

所以這對我不起作用？爲了簡單起見，想象我顛倒我的網頁，並希望保持圖像的原始。以這種方式使用上面的代碼會看起來像這樣：html {webkit-filter：invert（）;} img {webkit-filter：none;}這不起作用，除非我明確地將其更改爲img {webkit -filter：invert（）;}想法，想法，解決方案？你們真棒！ – Catalyst

您將初始反轉應用於父項，而不是圖像。考慮使用'html img {-webkit-filter：invert（）; }'。 –

其實，我認爲你真正需要的是更容易。如果你想要的是保持圖像，因爲它是那麼：

img { 
    -webkit-filter: invert(); 
} 

#photo1 { 
    -webkit-filter: none;

}

是您的解決方案。 img將被倒置（或任何你想要的），但IMG與ID = photo1不會。請注意，這並不是說你撤消了元素中的效果，而是重寫了它，所以變換永遠不會發生。

來源

2013-03-29 11:10:49 vals

Webkit un-invert invert（）圖像？

回答

相關問題