5

我对 css 过滤器 invert() 有一个烦人的问题；在 Firefox 25 上。这是插入到 jQuery .ready() 上下文中的代码：

$('#colorcontrast').bind('click', function() {

        var css = 'html {'+
                    ' filter:invert(100%);' + 
                    ' -webkit-filter: invert(100%);' +                    
                    ' -o-filter:invert(100%);' + 
                    ' -ms-filter:"invert(100%)"; }';      

        if (!window.counter) { 
            window.counter = 1;
        } else  { 
            window.counter ++;
            if (window.counter % 2 == 0) { 
                css = 'html {'+
                    ' -webkit-filter:invert(0%);' +
                    ' -moz-filter:invert(0%);' +
                    ' -o-filter:invert(0%); }';
            }
        };

        console.log(css);

        $('#contrast').html(css);

    });

它在 Chrome 和 IE9 上运行良好，但在 Firefox 25 上却不行。当我使用 Firefox 访问其文档参考页面时，我意识到现场演示无法正常工作！有人知道吗？谁能指出我应用这种过滤器的其他方式或解决方案？提前致谢。

4

2 回答 2

11

您可能想要使用SVG 过滤器。我基本上是一种使用 XML 结构的矢量图形图形语言。有了这个，您不仅可以创建矢量形状，还可以修改不同的元素。
我不确定 SVG 文件是如何生成特定效果的（为什么它不支持正常的 invert()，但这个确实支持）。

我用于此的 xml 文件：

<svg xmlns=\'http://www.w3.org/2000/svg\'>
  <filter id=\'invert\'>
    <feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/>
  </filter>
</svg>

我使用的 css + xml 网址：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#invert");

我知道颜色与原来的颜色不完全相同，但它是另一种选择。请注意，这只是 Firefox 的“hack”，您可以只对其他浏览器使用静态过滤器。

有关此主题的更多信息：

最新版本

W3School 教程

Morzilla 解释

在线 SVG 生成器。

Internet Explorer 中有关 SVG 的更多信息

您无法在生成器中找到所有效果，但我可能有助于查看具有不同效果的不同结构。您可能想先阅读对 XML 的一些基本了解 :)

jsFiddle

关于此问题的其他主题：Firefox 的 CSS 过滤器替代方案是什么？

于 2013-10-30T18:35:10.193 回答
4

Firefox还不支持 CSS 过滤器。完全没有。

此外，您应该切换一个类，而不是动态创建样式表。

于 2013-10-30T14:49:52.870 回答