图片未变色是因为css变量不触发重绘，须在图片元素上显式声明filter: grayscale(var(--grayscale))；顺序上grayscale必须在saturate前；safari旧版本不支持filter中直接用var()，需js拼接fallback。
灰度值用 --grayscale 控制时，为什么改了变量但图片没变？
CSS 变量本身不触发重绘，必须确保它作用在带 filter 的元素上，且该元素的样式是实时读取变量的。常见错误是把变量写在父级但没在图片自身声明 filter，或者用了 filter: grayscale(0.5) 这种固定值而非 grayscale(var(--grayscale))。
实操建议：
- 图片元素必须显式设置
filter: grayscale(var(--grayscale)) saturate(var(--saturate));，不能只靠继承 -
--grayscale和--saturate应定义在 :root 或图片父容器上，JS 修改时推荐改document.documentElement.style - 注意单位：CSS
grayscale()接收 0–1 数值或 0%–100%，但变量传入时统一用无单位小数更稳（比如0.7而非70%）
JS 修改 --grayscale 和 --saturate 的三种可靠写法
不是所有赋值方式都生效，尤其在 Shadow DOM 或 scoped 样式下容易失效。最稳妥的是直接操作根节点的 style 属性。
实操建议：
- 全局生效（推荐）：
document.documentElement.style.setProperty('--grayscale', '0.8'); - 局部生效（限单个容器）：
container.style.setProperty('--grayscale', '0');，前提是该容器有:host或对应选择器声明了变量 - 避免用
cssText或批量setAttribute('style', ...)，会覆盖已有内联样式
滤镜叠加顺序影响最终效果，saturate 必须放在 grayscale 后面吗？
是的。CSS filter 是从左到右执行的，grayscale(1) saturate(0) 和 saturate(0) grayscale(1) 效果不同：前者先去色再降饱和（结果纯灰），后者先抽掉色彩再灰度（可能残留亮度差异）。浏览器按函数顺序解析，顺序错了就得不到预期的“灰度+调饱和”混合效果。
实操建议：
- 固定写法：
filter: grayscale(var(--grayscale)) saturate(var(--saturate)); - 不要拆成多条
filter声明——CSS 不支持同属性多次声明叠加，后写的会覆盖前写的 - 如需加模糊或亮度，也按意图顺序追加，例如：
grayscale(...) saturate(...) brightness(...)
移动端 Safari 对 var(--x) 在 filter 中的支持有坑
iOS 15.4 之前，Safari 不支持在 filter 函数里直接用 CSS 变量，会静默忽略整条 filter 声明。即使写了 grayscale(var(--g))，也可能渲染为无滤镜状态，且控制台不报错。
实操建议：
- 兼容方案：用 JS 拼接完整 filter 字符串并写死到
style.filter，绕过 CSS 变量解析：img.style.filter = `grayscale(${grayscaleValue}) saturate(${saturateValue})`; - 检测是否支持：
CSS.supports('filter', 'grayscale(var(--t))')，返回false就走 JS 拼接 fallback - 别依赖 autoprefixer，它不处理
filter中的变量兼容性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
