CSS实现不同主题下的图片过滤_利用CSS变量设置filter

CSS变量不能直接用于filter函数如blur()，因变量是字符串而函数需数值；应预设完整filter值并用class切换，或用SVG滤镜配合JS动态控制。

filter 值不能直接用 CSS 变量动态计算

你写 --blur: 2px，再写 filter: blur(var(--blur))，浏览器会报错或失效——因为 filter 的函数值（如 blur()、contrast()）不接受纯变量，必须带单位或数字类型上下文。CSS 变量是字符串，而 blur() 期望的是一个长度值，不是字符串 "2px"。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 用 filter + 自定义属性组合时，**每个主题对应一组完整的 filter 值声明**，而不是拆解参数
• 避免写 filter: blur(var(--blur)) contrast(var(--contrast)) —— 这在绝大多数浏览器里不工作
• 真正可行的是：为每套主题预设好整条 filter 声明，通过 class 切换或 :root 覆盖

用 :root + class 切换主题 filter 更可靠

主流做法不是“动态拼 filter”，而是提前定义好几套完整值，靠类名激活对应 :root 变量，再让图片元素读取。这样既兼容性好，又不会触发解析失败。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 在 :root 中定义默认 --image-filter: none
• 给 body.dark 或 html[data-theme="dark"] 重置 --image-filter: contrast(0.8) brightness(0.9)
• 图片统一写 filter: var(--image-filter)，无需 JS 干预
• 注意：IE 完全不支持 filter 变量写法，如需兼容，得 fallback 到 class 直接写死

filter 性能敏感，别在动画里频繁改

filter 属于合成层触发属性，但像 blur()、drop-shadow() 会强制浏览器做离屏渲染，GPU 负担大。用 CSS 变量切换主题时，如果伴随大量图片重绘，滚动或悬停可能卡顿。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 主题切换时，优先只改 body 类，让所有 img 共享同一组 filter 值，避免逐个重排
• 慎用 blur(1px) 以上值——哪怕只是 2px，在中低端设备上也明显掉帧
• 如果图片本身有 will-change: filter，记得主题切完后清掉，否则内存泄漏风险上升

SVG 滤镜可绕过 CSS 变量限制，但更重

真要实现“参数级动态控制”，比如滑块调 sepia() 强度，CSS 变量走不通，就得用 SVG <filter> + url(#id) 引用，再配合 JS 改 <feColorMatrix> 的 values。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 把 SVG <filter> 内联进 HTML（不要外链），确保 DOM 就绪后能被 CSS 正确引用
• JS 控制时，改的是 filterElement.setAttribute('values', '...')，不是 CSS 变量
• 代价明显：每个动态滤镜都要一个独立 SVG 定义，DOM 膨胀快，维护成本高
• 移动端 Safari 对 SVG 滤镜的硬件加速支持不稳定，某些 feConvolveMatrix 会退到 CPU 渲染

复杂点在于：你以为改个变量就能动 filter，其实浏览器底层根本不让你“算”它；真正可控的，永远是预设值 + 切换，或者绕道 SVG + JS。漏掉这点，调试半天都找不到为什么 var(--blur) 不生效。