如何使 css 过滤器在 Firefox 中工作？答案

【问题标题】：how to make css filters work in Firefox?如何使 css 过滤器在 Firefox 中工作？
【发布时间】：2014-08-11 22:27:16
【问题描述】：

我擅长 HTML5 和 CSS，但我以前从未使用过过滤器。所以我使用 Jquery 应用了一些 fiters，它们在 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 一样链接一些库？

谢谢

【问题讨论】：

您需要使用非 webkit 前缀，而 FF 不支持 -webkit-prefixes。试试-moz-filter。
@Paulie_D 总的来说你是对的，但 Firefox 只是不支持从 URL 获取 SVG 过滤器定义以外的任何东西。
你可以用 JS 来完成同样的事情，只是效率不高。
看来 Firefox 34 会直接支持 CSS filter:，见 Bugzilla bug 948265。

标签： javascript jquery html css svg

【解决方案1】：

Firefox 不支持 CSS-Filter（还没有？）。
来源：http://css-tricks.com/almanac/properties/f/filter/#browser-support
编辑（回答新问题）：我发现了一篇讨论 CSS 过滤器替代方案以支持 firefox 的 stackoverflow 帖子：What's the CSS Filter alternative for Firefox?

【讨论】：

你可以在Caniuse这样的网站上查看。
这是一个正确的说法，但它并没有真正回答问题

【解决方案2】：

很遗憾，您还不能在 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');    
});

Here is a good resource showing different filter effects using svg

This answer 有一个 good example 如何使用 svg

如果你想玩弄颜色，那么你需要了解this tutorial 和matrix multiplication

【讨论】：

我应该创建一个简单的文本文件并将其命名为 .svg？或者是xml文件还是javascript
这是一个 svg 文件 - 以 xml 的形式（但有一个 svg 扩展名）
这也适用于内联 SVG。不需要单独的文件。

【解决方案3】：

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

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

【讨论】：

那篇文章进一步解释了filter: 不受Firefox 或IE 支持。