直接给<img>加filter最可靠，但需避开层叠上下文隔离、overflow裁剪、单位混用三类高频失效点：父容器含transform/opacity<1/will-change/position:fixed会创建新层叠上下文，使滤镜仅作用于其“快照”；overflow:hidden会硬裁blur()溢出像素；blur()单位必须为px，且须等图片load后触发重绘。
直接给 <img> 加 filter 是最可靠起点，但必须绕开层叠上下文隔离、overflow 裁剪、单位混用这三类高频失效点。
为什么 filter 加了却没反应？不是代码错，是渲染被截断
常见现象：写好 filter: blur(2px)，图片纹丝不动；DevTools 里看到样式已生效，但视觉无变化。
- 父容器有
transform、opacity: 0.99、will-change或position: fixed—— 这些会创建新层叠上下文，filter只作用于该容器的“快照”，而非原始图片像素 - 父容器设了
overflow: hidden——blur()或drop-shadow()的溢出像素被硬裁掉，哪怕blur(0.5px)也立刻消失 - 图片还没加载完成（
onload前）就设置filter—— 部分浏览器跳过首次渲染，等加载完才重绘，造成“延迟生效”假象 - 临时验证法：给父容器加
overflow: visible或margin: 2px，看滤镜是否瞬间出现
响应式切换时别在 @media 里直改 filter 值
直接写 @media (max-width: 768px) { img { filter: contrast(0.8) brightness(1.2); } } 会导致缩放卡顿、闪烁、边缘发虚——这不是 bug，而是浏览器对 filter 每次变更都触发完整像素重计算，resize 过程中频繁重绘所致。
- 正确做法：用 CSS 自定义属性统一管理参数，在
:root定义--f-blur: 0; --f-contrast: 1; - 媒体查询只更新变量：
@media (max-width: 768px) { :root { --f-blur: 1px; --f-contrast: 0.9; } } -
<img>样式始终为：filter: blur(var(--f-blur)) contrast(var(--f-contrast)); - 所有单位保持一致：
blur()必须用px，brightness()和contrast()统一用小数（如1.2），不混用120%
暗黑模式下 filter 必须绑定变量，硬编码值不会响应主题切换
写 filter: brightness(0.8) 在 [data-theme="dark"] 下看似生效，但切回亮色模式时它不会自动恢复——因为浏览器不监听 data-theme 变化，这个值就是个静态常量。
立即学习“前端免费学习笔记（深入）”；
- 必须在
:root定义默认值：--img-brightness: 1; - 在
[data-theme="dark"]中覆盖：--img-brightness: 0.85;（实测比0.8更耐看，0.75以下易塌细节） -
<img>样式统一为：filter: brightness(var(--img-brightness));，漏掉var()括号或分号都会失效 - 注意：
@media (prefers-color-scheme: dark)对<img>的src无效，换图源必须靠<picture>或 JS
移动端和旧浏览器兜底的关键不在 polyfill，而在降级策略
filter 在 iOS Safari 9+、Chrome Android 50+、Firefox 35+ 原生支持良好，但 IE 完全不认，Android 4.x 渲染极弱。强行用 CSS-Filters-Polyfill 库接管，往往带来更大兼容风险和性能负担。
- 优先用
@supports (filter: blur(1px))包裹主样式，避免不支持环境执行无效规则 - 对不支持环境，降级重点不是“模拟模糊”，而是保持可读性：比如把
background-color: rgba(255,255,255,0.12)提高到0.7，再加轻微box-shadow模拟景深 - 避免在移动端滥用
drop-shadow()或多层叠加（如blur(2px) contrast(1.3) saturate(1.5)），GPU 压力大，低端机易掉帧 - 高清屏（
dpr > 1）下，blur(1px)实际模糊半径偏弱，可用calc(var(--f-blur) * 2)动态放大
真正容易被忽略的是：滤镜效果依赖合成层，而响应式布局中那些看似无害的 transform、overflow: hidden、position: fixed，常常在你没注意时悄悄切断了渲染链路。调试时别只盯 CSS 规则，先打开 Chrome 的 Layers 面板确认图片是否在独立合成层里。
