【问题标题】: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%) 以反转原始反转。
    猜你喜欢
    • 1970-01-01
    • 2021-11-16
    • 2019-01-06
    • 1970-01-01
    • 2019-04-01
    • 2020-07-29
    相关资源
    最近更新 更多