CSS saturate()函数可直接调整元素饱和度，0为完全去色，1为原始值，1.25等小数更自然；参数须为无单位数字，非百分比；失效主因是语法错误、渲染链路中断或浏览器兼容性问题。

直接用 filter: saturate() 就行，99% 的场景不需要 JS 或 Canvas —— 但参数填错、渲染被拦、设备不认，这三类问题占失效案例的 90% 以上。

saturation() 参数必须是无单位数字，不是百分比

很多人写成 saturate(80%) 或 saturate(0.8)，以为是“降到 80%”，其实它只接受倍率：0 是灰度，1 是原图，1.3 是原图的 1.3 倍饱和度。

• saturate(0) → 完全去色，纯灰度
• saturate(1) → 无变化，原始状态
• saturate(1.25) → 轻微提鲜，比 saturate(2) 更自然耐看
• saturate(0.6) → 保留情绪感，避免 saturate(0) 那种死灰
• 别写 saturate(150%)，那是无效语法；也别写 saturate=1.2，会整个声明被浏览器忽略

图片加了 saturate() 却没反应？先查这三处

不是代码写错，而是渲染链路被悄悄中断。最常见原因就三个：

• 父容器或自身有 transform（比如 scale(1)）或 will-change: transform —— 某些 Android WebView 直接跳过 filter 渲染
• 图片来自 CDN 或跨域地址，但没加 crossOrigin="anonymous" —— filter 不报错，只是静默失效
• iOS Safari 15.3 及更早版本中，<img> 的某个祖先元素是 display: inline（比如默认的 <p> 或未设 display 的 wrapper），filter 会被忽略

多滤镜组合时顺序不能乱

filter 函数从左到右执行，顺序直接影响结果。比如：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• filter: grayscale(1) saturate(0)：先灰度，再试图去饱和——无效，灰度后已无色彩可调
• filter: saturate(0.3) contrast(0.9)：先降饱和再微压对比，比单用 grayscale(0.7) 更有层次
• 推荐固定链式顺序：brightness → contrast → saturate → hue-rotate，便于调试和协作维护

@supports 检测比 polyfill 更实际

IE 11 完全不支持 filter，Edge 12–15 支持有限。强行用 Canvas 兜底代价大、性能差、还容易出错。

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

• 用 @supports (filter: saturate(1)) 检测，现代浏览器走 CSS 路线
• 不支持时，显示原图 + 一句轻量提示（如“视觉效果暂不可用”），比白屏或卡顿更友好
• 真要兼容老环境，可用 SVG <feColorMatrix> 替代，但它只能预设几档固定值（如 saturate-0.5），无法响应式调节

真正麻烦的不是怎么调，而是调完之后要不要响应式重绘、是否触发离屏渲染、有没有在滚动列表里批量应用——这些点一旦漏掉，页面就卡在用户手指划动的那一帧上。