如何使Firefox中的CSS滤镜生效？

Question

我擅长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的库？

谢谢。

- user3875706

---

你需要使用非webkit前缀，并且FF不支持-webkit前缀。尝试使用-moz-filter。 - Paulie_D

@Paulie_D 你说得总体上是对的，但Firefox除了从URL获取SVG过滤器定义之外，就没有其他支持了。 - Pointy

你可以使用JS来实现相同的功能，但它执行起来不会像其他语言那样高效。 - Novocaine

看起来Firefox 34将直接支持CSS filter:，请参见Bugzilla bug 948265。 - Neil

Answer 1

火狐浏览器目前还不支持CSS-Filter（或许以后会支持？）。
来源：http://css-tricks.com/almanac/properties/f/filter/#browser-support
编辑（回答新问题）：我找到了一个Stackoverflow帖子，讨论了在Firefox中支持CSS过滤器的替代方案：What's the CSS Filter alternative for Firefox?

- Ch33f

---

您可以在类似 Caniuse 的网站上进行检查。 - TylerH

这是一个正确的陈述，但它实际上并没有回答问题。 - Novocaine

Answer 2

很遗憾，目前火狐浏览器还不支持使用筛选器。

一个解决方法是创建一个名为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应该是相对于你刚刚创建的svg文件的css文件）：

.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

如果你想玩转颜色，那么你需要理解这篇教程和矩阵乘法

- Pete

---

我应该创建一个简单的文本文件并将其命名为.svg吗？还是它是XML文件或JavaScript？ - user3875706

这是一个svg文件 - 以xml形式呈现（但具有svg扩展名） - Pete

这在内联SVG中也适用。不需要单独的文件。 - Michael Mullany

Answer 3

-webkit-filter包含前缀-webkit，仅在基于Webkit引擎的浏览器（如Safari和Chrome）中受支持。Firefox的前缀为Mozilla的-moz，但Firefox不支持此属性。

在此阅读更多信息：http://css-tricks.com/almanac/properties/f/filter/

- Paul Redmond

---

该文章进一步解释了filter:在Firefox或IE中不受支持。 - Pointy