CSS滤镜：模糊（0像素）仍会使文字模糊

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切换样式类。有什么建议如何处理它？

- Marcel Krebs

---

你说的模糊是什么意思？模糊是一个 jQuery 事件处理程序，它表示当你失去焦点时元素会变得模糊。你是指透明度吗？ - Ringo

@hicurin filter 是一个 CSS 属性，它接受一个值为 blur([像素])。这可以用来给文本添加模糊效果。(http://jsfiddle.net/JamesD/FJxNv/3/) - James Donnelly

Answer 1

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

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

这里有一个JSFiddle演示，展示了两者之间的差异。上方文本将滤镜重置为initial，而下方文本将滤镜设置为blur(0)（相当于使用blur(0px）；上方文本恢复正常，而下方文本保留了模糊字体渲染效果。

- James Donnelly

---

这确实使文本变得清晰，但与过渡效果结合使用时不起作用。目前只有模糊(0像素)才能实现平滑的过渡效果... - Marcel Krebs

@MarcelKrebs 它在Chrome中使用转换确实有效。你用的是哪个浏览器？http://jsfiddle.net/JamesD/FJxNv/4 - James Donnelly

我现在正在使用Chrome。Mhh是.jQuery切换.blurred类的问题吗？ - Marcel Krebs

@MarcelKrebs 我无法复制这个问题。如果您单击文本，则转换仍然正常工作：http://jsfiddle.net/JamesD/FJxNv/5/ - James Donnelly