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

时间:2014-08-11 13:21:29

标签: javascript jquery html css svg

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

谢谢

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分: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 answergood example如何使用svg

如果您想要使用颜色,那么您需要了解this tutorialmatrix multiplication

答案 2 :(得分:0)

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

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