Question

我很擅长使用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？

谢谢

Answer 1

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

Answer 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

Answer 3

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

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

如何让css过滤器在Firefox中运行？

3 个答案: