我想对我网站的一部分进行模糊处理,通过单击链接可以使其变得不模糊。为了使这个平滑,我需要应用 blur(0px) 并在元素上进行过渡。但问题是即使使用 blur(0px),文本也会变得不清晰。
.page.blurred {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
filter: blur(10px);
}
.page {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
filter: blur(0px);
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}
我用 jQuery 切换类。 有什么处理建议吗?
最佳答案
有趣的问题。一种解决方法是将 filter
属性设置为 initial
,从而完全重置过滤器:
elem {
-webkit-filter: initial;
filter: initial;
}
这是一个 JSFiddle demo显示两者之间的区别。顶部文本将过滤器重置为 initial
,而底部文本将过滤器设置为 blur(0)
(相当于使用 blur(0px
; 顶部文本恢复正常,而底部文本保留模糊的字体渲染。
关于CSS 过滤器 : blur(0px) still blurs the text,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20281949/