Question

我想模糊我的网站的一部分，通过点击链接可以避免模糊。为了使这个平滑，我需要应用模糊（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切换类。有任何建议如何处理它？</ p>

Answer 1

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

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

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

CSS过滤器：模糊（0px）仍然模糊文本

1 个答案: