我很擅长使用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?
谢谢
答案 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 answer有good example如何使用svg
如果您想要使用颜色,那么您需要了解this tutorial与matrix multiplication
答案 2 :(得分:0)
-webkit-filter
包含前缀-webkit
,仅在基于webkit引擎的浏览器中支持,例如Safari和Chrome。对于Mozilla,Firefox的前缀为-moz
,但Firefox不支持此属性。
在此处阅读更多内容:http://css-tricks.com/almanac/properties/f/filter/