Mozilla Firefoxで上書きされないCSSフィルタの反転が

私は夜に快適な読書ページ用の小さなFirefoxアドオンを書いています。ページの色は反転しますが、イメージは反転しません。コードは次のとおりです。Mozilla Firefoxで上書きされないCSSフィルタの反転が

document.body.style.filter = "invert(100%)"; 

var imgs = document.getElementsByTagName("img"); 

for (var i = 0; i < imgs.length; i++) { 
    imgs[i].style.removeProperty("filter"); // NOT WORKING 
    imgs[i].style.filter = "invert(0%)"; // NOT WORKING EITHER 
}

問題は期待どおりに動作しないということです - 画像はまだ反転し、Firefoxの内部の要素を検査thouth彼らは適切な反転（0％）のスタイルを持って示しています。

出典

2016-09-23 Tol182

身体を反転させると意味するのは、です。その内容は逆です。画像を元の色で表示するには、を再度反転する必要があります。、つまりinvert(100%)を適用します。

これはCSSの継承とは異なり、箱のピクセルを親に合成するときに概念的に適用されるフィルタで、画像は<body>ボックスの内側にあるため、反転されます。

小追記：あなたはdocument.documentElementまたは:rootセレクタに適用することをお勧めします - 体がビューポートよりも小さくすることができるので、 - <html>ノードがありますほとんどの場合。考慮すべきもう一つのことは、逆さまの文書の中にネストされたフレームです。

出典

2016-09-23 16:06:58 the8472

画像に反転（100％）を適用すると、私は必要なものを行います！ありがとうございました！ – Tol182

Mozilla Firefoxで上書きされないCSSフィルタの反転が

答えて

関連する問題