css - CSS过滤器:blur(0px)仍然使文本模糊

我想模糊我的网站的一部分，通过单击链接将其变得模糊。为了使此平滑，我需要应用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 - CSS过滤器:blur(0px)仍然使文本模糊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20281949/