CSS blur滤镜仅在页面加载时生效，加载完成后失效的原因排查

这个问题我之前帮同事排查过类似的，通常逃不开这几个常见原因，咱们一步步拆解：

1. 其他样式/脚本在页面加载完成后覆盖了滤镜 #

很多前端框架（比如React、Vue）或者第三方脚本，会在页面初始化完成后（比如组件挂载、DOMContentLoaded触发后）对根元素（包括body）的样式做重置操作。另外，如果你的自定义CSS规则优先级不够，也会被后续加载的全局样式给覆盖掉。

解决办法：

• 提升CSS规则的优先级：比如用更具体的选择器，比如 html body 代替单独的 body，或者给body加个类名（比如 <body class="blur-on-load">）然后写 .blur-on-load { filter: blur(10px); }
• 尽量避免用!important，但如果确实没办法，也可以临时救急：body { filter: blur(10px)!important; }

2. 浏览器渲染时机导致的“瞬间生效” #

如果你的滤镜CSS是写在<head>里的内联样式，页面加载初期body还没有内容，浏览器会先渲染这个带滤镜的空body；当页面内容（图片、DOM元素）加载完成后，有些浏览器会重新计算渲染树，这时候如果有其他默认样式或者后续加载的CSS把filter给重置了，就会出现“瞬间消失”的情况。

解决办法：

• 把你的滤镜样式放在所有CSS文件的最后加载，确保它是最后生效的规则；
• 用JS在页面完全加载后再设置滤镜：

window.addEventListener('load', () => {
  document.body.style.filter = 'blur(10px)';
});

3. JS设置无效的常见坑 #

如果后续用JS设置也没效果，大概率是这两个问题：

• 获取元素时机不对：如果你的JS代码写在<head>里，还没等到body元素被解析就执行了，自然设置不了样式。解决办法就是把JS放在</body>标签前，或者用DOMContentLoaded/load事件包裹；
• 样式被!important规则覆盖：如果有其他CSS规则用了!important设置了filter: none，那JS设置的inline样式也会失效。这时候要么去掉那个!important，要么在JS里也设置!important（虽然不推荐，但可以这么写）：

document.body.style.cssText += 'filter: blur(10px)!important;';

另外还有个少见的情况：如果body的父元素（比如html）设置了overflow:hidden或者其他影响渲染的属性，也可能导致滤镜不生效，可以检查一下父元素的样式。

内容的提问来源于stack exchange，提问作者zupazt3