覆盖CSS滤镜反转在Mozilla Firefox中不起作用

我正在写小型Firefox附加组件，以便在晚上舒适地阅读页面。它应该反转页面颜色，但不会反转图像。的代码是：覆盖CSS滤镜反转在Mozilla Firefox中不起作用

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表明他们有适当的反转（0％）风格thouth检查元素。

来源

2016-09-23 Tol182

如果您反转的意思是全部其内容倒置。要以原始颜色显示图像，您需要再次将它们反转，即将invert(100%)应用于它们。

请注意，这与CSS继承有所不同，过滤器在将框的像素合成到其父项时概念上适用，图像位于<body>框内，这就是为什么它们也反转的原因。

小旁注：您可能希望将它应用到document.documentElement或:root选择 - 在这就是<html>节点大多数情况下 - 因为机构可以比视小。要考虑的另一件事是嵌套在倒置文档中的帧。

来源

2016-09-23 16:06:58 the8472

先生，应用反转（100％）的图像做我需要！谢谢！ – Tol182

覆盖CSS滤镜反转在Mozilla Firefox中不起作用

回答

相关问题