Question

我遇到了css过滤器invert（）的烦人问题;在Firefox 25上。这是代码，插入到jQuery .ready（）context：

中

$('#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访问doc reference page时，我意识到现场演示无效！有人知道吗？任何人都可以指出我应用这种过滤器的其他方式或解决方案吗？提前谢谢。

Answer 1

您可能想要使用SVG filter。我基本上是一个使用XML结构的矢量形图形语言。有了它，您不仅可以创建矢量形状，还可以修改不同的元素。
我不确定SVG文件是如何产生特定效果的（为什么它不支持普通的反转（），但这个支持）。

我用于此的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”，您可以将静态过滤器用于其他浏览器。

<小时/> 关于这个主题的更多信息：

Latest version

W3School tutorial

Morzilla explenation

a SVG generator online

More info about SVG in Internet Explore

<小时/> 您无法在生成器中找到所有效果，但我可能会看到具有不同效果的不同结构。您可能希望首先阅读对XML的一些基本了解：）

<强> jsFiddle

<小时/> 关于此事的其他主题：What's the CSS Filter alternative for Firefox?

Answer 2

Firefox doesn’t support CSS filters yet。完全没有。

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

css filter invert（）不能在mozilla firefox上运行？

2 个答案: