我尝试在图像 + 文本上添加模糊效果,在 Java 中添加点击效果。
它在 chrome 和 safari 中运行良好。
但是我没有机会在 Firefox 中实现这种效果。
代码:
$('.newsletter').click(function(){
$(".overlay_newsletter").fadeIn();
$(".name, li, .newsletter, svg, .header-links").css({
'-webkit-filter': 'blur(3px)',
'filter': 'blur(3px)',
'-moz-filter': 'blur(3px)'});
$(".menu-expand").css({
'-webkit-filter': 'blur(8px)',
'filter': 'blur(8px)',
'-moz-filter': 'blur(8px)',
'opacity':'0.5'});
$(".logo").css({
'-webkit-filter': 'blur(8px)',
'filter': 'blur(8px)',
'-moz-filter': 'blur(8px)'});
});
希望有人能在这里帮助我:)
最佳答案
你应该最后设置无前缀规则。
$('.newsletter').click(function(){
$(".overlay_newsletter").fadeIn();
$(".name, li, .newsletter, svg, .header-links").css({
'-webkit-filter': 'blur(3px)',
'-moz-filter': 'blur(3px)',
'filter': 'blur(3px)'});
$(".menu-expand").css({
'-webkit-filter': 'blur(8px)',
'-moz-filter': 'blur(8px)',
'filter': 'blur(8px)',
'opacity':'0.5'});
$(".logo").css({
'-webkit-filter': 'blur(8px)',
'-moz-filter': 'blur(8px)',
'filter': 'blur(8px)'});
});
除了旧版本的 FF 需要 svg 才能应用模糊效果。 https://developer.mozilla.org/en/docs/Web/CSS/filter
关于jquery - 过滤器 :Blur Firefox Issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31501023/