直接用 CSS 的 filter: saturate() 可设置图片饱和度，参数为无单位数字：saturate(0) 灰度、saturate(1) 原始、saturate(1.3) 增强、saturate(0.6) 降饱和；避免写百分比，注意父级 transform、跨域未设 crossOrigin、iOS Safari 旧版 inline 祖先等导致失效场景；多滤镜按从左到右执行；动画推荐单动 saturate()；IE 不支持，用 @supports 检测并优雅降级。
直接用 CSS 的 filter: saturate() 就能设置图片饱和度，不用写 JS 或 Canvas——但参数怎么填、为什么有时没反应、哪些设备会不认，得对准关键点。
饱和度参数怎么写才对
saturate() 只接受无单位数字，不是百分比：
-
saturate(0)是纯灰度（完全去色） -
saturate(1)是原始饱和度（不做改变） -
saturate(1.3)表示“增强到 1.3 倍”，适合轻微提鲜，耐看不刺眼 -
saturate(0.6)是降低到原图的 60%，比saturate(0)更有情绪感，避免死灰 - 别写成
saturate(80%)或saturate(0.8)——那会被当成“设为 80% 饱和度”，逻辑上等价于saturate(0.8)，但容易误解
图片加了 saturate() 却没变化？先排查这三处
多数时候不是代码写错，而是渲染被悄悄拦住了：
- 父容器或图片自身设置了
transform（比如scale(1)）或will-change: transform，某些安卓 WebView 会跳过 filter 渲染 - 图片来自 CDN 或跨域地址，但没加
crossOrigin="anonymous"——filter 不报错，只是静默失效 - 在 iOS Safari 15.3 及更早版本中，如果
<img>的某个祖先元素是display: inline，filter 会被忽略
多滤镜组合时顺序很重要
filter 函数从左到右执行，顺序直接影响结果：
立即学习“前端免费学习笔记（深入）”；
-
filter: saturate(0) grayscale(1)：先去饱和再灰度（冗余） -
filter: grayscale(1) saturate(0)：先灰度再试图去饱和（无效，灰度后已无色彩） - 想保留一点色调又压低饱和，推荐
saturate(0.3) contrast(0.9)，比单用grayscale(0.7)更自然 - 动画中渐变饱和度，只动
saturate()一个函数，避免多个 filter 连用引发卡顿
旧浏览器兼容和降级处理
IE 完全不支持 filter，Edge 12–15 支持有限：
- 优先用
@supports (filter: saturate(1))检测，现代浏览器走 CSS 路线 - 给不支持的用户显示原图 + 一句轻量提示（比如“您的浏览器暂不支持视觉效果”），比白屏或强行 polyfill 更友好
- 真要兜底老环境，可用 SVG
<feColorMatrix>替代，但只能预设几档固定值（如saturate-0.5），无法动态调节
