CSS 过滤器 : blur(0px) still blurs the text

Question

我想对我网站的一部分进行模糊处理，通过单击链接可以使其变得不模糊。为了使这个平滑，我需要应用 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 切换类。有什么处理建议吗？

Answer 1

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

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

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