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

【问题标题】：Overwrite CSS filter invert not working in Mozilla Firefox覆盖 CSS 过滤器反转在 Mozilla Firefox 中不起作用
【发布时间】：2016-10-08 21:56:18
【问题描述】：

我正在编写小型 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 中检查元素显示它们具有正确的 invert(0%) 样式。

【问题讨论】：

标签： javascript css firefox

【解决方案1】：

如果你反转正文，这意味着所有它的内容都被反转了。要以原始颜色显示图像，您需要再次反转它们，即将invert(100%) 应用于它们。

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

小旁注：您可能希望将其应用于document.documentElement 或:root 选择器——在大多数情况下是<html> 节点——因为主体可以小于视口。要考虑的另一件事是嵌套在倒置文档中的框架。

【讨论】：

先生，我需要对图像应用 invert(100%) ！谢谢！