我对css filter invert()有一个恼人的问题;在Firefox 25上.
这是在jQuery .ready()上下文中插入的代码：
这是在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访问其doc reference page时,我意识到现场演示无效！
有谁知道一些事情？任何人都可以指出我应用这种过滤器的其他方式或解决方案吗？
提前致谢.
解决方法
你可能想要使用
SVG filter.我基本上是一个使用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”,您可以将静态过滤器用于其他浏览器.
关于这个主题的更多信息：
More info about SVG in Internet Explore
