如何让css过滤器在Firefox中工作

how to make css filters work in Firefox?

本文关键字：Firefox 工作 过滤器 css      更新时间：2023-09-26

我很擅长HTML5和CSS，但我以前从未使用过过滤器。所以我使用Jquery应用了一些过滤器，它们在Chrome上工作得很好，但是当我试图在firefox中应用它们时什么也没有发生。

Jquery代码
$('#grayscale').click(function() {
    $('#uploadedPhoto').css('-webkit-filter', 'grayscale(100%)');   
});
$('#sepia').click(function() {
    $('#uploadedPhoto').css('-webkit-filter', 'sepia(100%)');   
});

这只是两个例子。我搜索了一下，发现Firefox还不支持简单的filter:语法，还有一些其他的URL和SVG的方法。你能给一个例子或链接到特定的过滤器url库。对于这个URL方法，我是否必须先链接一些库，如Jquery?

谢谢

Firefox还不支持CSS-Filter。
来源:http://css-tricks.com/almanac/properties/f/filter/#browser-support
编辑(回答这个新问题):我在stackoverflow上找到了一篇文章，讨论了支持firefox的css过滤器的替代方案:firefox的css过滤器替代方案是什么?

遗憾的是，你还不能在firefox中使用过滤器。

一个解决方法是创建一个文件名filters.svg，包含以下内容: 
<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
    <filter id="sepia">
        <feColorMatrix type="matrix" values="0.343 0.669 0.119 0 0 0.249 0.626 0.130 0 0 0.172 0.334 0.111 0 0 0 0 0 1 0 "/>
    </filter>
</svg>

然后使用以下样式(svg的url应该是从css文件到您刚刚创建的svg文件的相对关系):

.greyscale {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: grayscale(100%); /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Google Chrome, Safari 6+ & Opera 15+ */
}
.sepia{
    filter: url(filters.svg#sepia); /* Firefox 3.5+ */
    filter: sepia(100%);
    -webkit-filter: sepia(100%); /* Google Chrome, Safari 6+ & Opera 15+ */
}

使用以下js

$('#grayscale').click(function() {
    $('#uploadedPhoto').addClass('greyscale');   
});
$('#sepia').click(function() {
    $('#uploadedPhoto').addClass('sepia');    
});

这是一个很好的资源，展示了使用svg的不同滤镜效果

这个答案有一个如何使用svg的好例子

如果你想摆弄颜色，那么你需要了解本教程的矩阵乘法

-webkit-filter包含前缀-webkit，仅支持基于webkit引擎的浏览器，如Safari和Chrome。Firefox的前缀是-moz，但是Firefox不支持这个属性。

阅读更多:http://css-tricks.com/almanac/properties/f/filter/

相关文章：