CSS 过滤器：blur(0px) 仍然模糊文本

Question

我想对我网站的一部分进行模糊处理，单击链接后该部分会变得不模糊。为了使这个平滑，我需要应用 blur(0px) 并在元素上获得过渡。但问题是即使使用模糊（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 切换类。 有什么建议如何处理吗？

Answer 1

有趣的问题。对此的一种解决方法是将filter 属性设置为initial，从而完全重置过滤器：

elem {
    -webkit-filter: initial;
    filter: initial;
}

这是一个JSFiddle demo，显示了两者之间的区别。顶部文本将过滤器重置为initial，而底部文本将过滤器设置为blur(0)（相当于使用blur(0px；顶部文本恢复正常，而底部文本保留模糊的字体渲染。