Chrome中的css反转过滤器答案

【问题标题】：css invert filer in ChromeChrome中的css反转过滤器
【发布时间】：2013-06-27 19:46:27
【问题描述】：

我有

BODY
{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-ms-filter: invert(100%);
-o-filter: invert(100%);
filter: invert(100%);
}

和

.jpg
{
-webkit-filter: invert(0%) !important;
-moz-filter: invert(0%) !important;
-ms-filter: invert(0%) !important;
-o-filter: invert(0%) !important;
filter: invert(0%) !important;
}

这适用于 MIE。 Chrome 也坚持使用 jpg 类反转图片。

有什么建议吗？

【问题讨论】：

标签： css google-chrome css-filters

【解决方案1】：

来自Understanding CSS Filter Effects：

当浏览器加载网页时，它需要应用样式、执行布局，然后渲染页面，以便查看内容。在所有这些步骤之后和页面被复制到屏幕之前，过滤器就会启动。他们所做的是将渲染页面的快照作为位图图像，然后对快照中的像素执行一些图形魔术，然后将结果绘制在原始页面图像的顶部。

您正在对body 应用过滤器，并且过滤器作为平面图像应用于整个元素，而不是单独的每个子元素，因此您不能像您一样覆盖子元素的过滤器努力去做。

您可以在您的情况下将invert(100%) 应用于您想要显示为未反转的选择器，因为双重反转图像再次变得正常。

【讨论】：

谢谢。就像我提到的那样，您可以覆盖 MIE 中孩子的过滤器。但如果这是 W3C 推荐的，我不知道。我确实考虑过为 Chrome 做双重事情。我现在就试试。
是的。那行得通！向前迈出了一大步。 :) 遗憾的是，它还在 Chrome 中反转了 Facebook 个人资料照片的拇指。（不在 MIE 中）。但这比我拥有的要好得多。无论如何，Facebook Like 按钮几乎是不可能自定义的。
我们知道为什么有人在谈论 -moz-filter 和 -o-filter 吗？据我所知，Firefox 和 Opera 不支持过滤器。只是对可能很快奏效的希望？
我不确定，我对哪些浏览器支持它感到困惑。 caniuse 说它只在 WebKit 上，但我回答中的文章也说 Firefox。其中任何一个都没有提到 IE，但如果您看到结果，可能是它触发了他们旧的、已弃用的过滤器。
关于触发 Microsoft 已弃用过滤器的好理论。可能是它。人们确实一直声称它在 FF 中分叉。例如这里：webmasterworld.com/css/4030964.htm。我还刚刚发现还有另一个前缀：-khtml 代表 Konqueror。

【解决方案2】：

错误出现在第一条语句中。要修复它，请使用以下

*
{
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -ms-filter: invert(100%);
    -o-filter: invert(100%);
    filter: invert(100%);
}

.jpg
{
    -webkit-filter: invert(0%) !important;
    -moz-filter: invert(0%) !important;
    -ms-filter: invert(0%) !important;
    -o-filter: invert(0%) !important;
    filter: invert(0%) !important;
}

【讨论】：

我不知道 * 可以像 CSS 那样独立存在。此外，它对我不起作用。但是您的回答确实让我再次尝试解决此问题，并且它现在似乎在所有浏览器中都有效。谢谢哟。
出于性能考虑，建议远离“通用选择器”（尤其是在没有额外选择器的情况下），这也可能会变得很不稳定，因为每个元素都会有自己的过滤器，所以您可能有过滤器在某些反转前一个过滤器的过滤器上。我建议您在 html 选择器上使用它，以避免定位问题并使用单个过滤器。然后，您可以在 .jpg 选择器上执行 invert(100%) 以反转原始反转。