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

原文 标签 css filter 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 切换类。
任何建议如何处理它?

最佳答案

有趣的问题。对此的一种解决方法是设置 filter属性(property)到initial ,从而完全重置过滤器:

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

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

关于CSS 过滤器 : blur(0px) still blurs the text,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20281949/

相关文章:

javascript - 在 ng-repeat 上更改一次迭代

html - 如何在背景速记中实现CSS模糊?

php - WordPress - 上传时模糊图像

javascript - 将 Google map 高度设置为图像高度

c++ - QDir.setNameFilter 如何仅显示具有特定扩展名的文件?

css - 如何在高度可变的容器中生成滚动?

git 查找被污迹/清洁过滤器过滤的文件的文件名

javascript - Canvas 上的 IE8 模糊滤镜

html - 打印 HTML 表格时丢失列宽

css - div 放在一边,位置绝对和粘性页脚