filter: contrast() 和 saturate() 均以无单位数值为基础写法，1为原始值，需用纯数字（如contrast(1.5)）而非百分比；contrast(0)呈纯灰，saturate(0)为完全去色；多函数叠加用空格分隔，顺序影响效果；主流浏览器基本支持，但旧版Safari存在兼容性差异。
filter: contrast() 和 saturate() 的基础写法
直接用 filter 设置图片对比度和饱和度，不需要额外 JS 或 Canvas。两个函数都接受一个无单位数值：1 是原始值，小于 1 降低，大于 1 增强。
常见错误是写成百分比（比如 contrast(150%)），这在部分浏览器里会失效或行为不一致——必须用纯数字，如 contrast(1.5)。
-
contrast(1)= 原图；contrast(0)= 纯灰（全失真，不是黑）；contrast(0.5)= 对比度减半 -
saturate(1)= 原图；saturate(0)= 完全去色（灰度）；saturate(2)= 饱和度翻倍 - 多个 filter 叠加用空格分隔：
filter: contrast(1.3) saturate(0.8);，顺序会影响视觉结果（先对比后饱和，和先饱和后对比略有差异）
Chrome/Firefox/Safari 兼容性差异
现代浏览器基本都支持 contrast() 和 saturate()，但 Safari 旧版本（contrast(0) 渲染异常：可能显示为黑块而非灰阶。遇到这种问题，优先改用 contrast(0.01) 替代。
另外，IE 完全不支持 filter 的函数式写法（只认老式 filter: progid:DXImageTransform.Microsoft...），现在基本可忽略，除非要兼容十年前的系统。
立即学习“前端免费学习笔记（深入）”；
- 移动端 iOS Safari ≥13、Android Chrome ≥76 均稳定支持
- 如果用在
<img>上，注意父容器不要设overflow: hidden+ 圆角（border-radius），否则某些 Android 版本会裁掉 filter 溢出区域 - filter 会触发硬件加速，大量图片同时应用可能轻微增加内存占用，但一般页面影响不大
和 grayscale()、brightness() 混用时的顺序陷阱
filter 函数执行顺序是从左到右，不是数学意义上的叠加。比如 filter: brightness(0.8) contrast(1.5) 是先变暗再拉对比，而 filter: contrast(1.5) brightness(0.8) 是先拉对比再变暗——后者更容易出现过曝或死黑。
尤其当 saturate() 和 grayscale() 同时存在时，grayscale(1) 会把所有颜色清零，后面接 saturate(2) 也无效；反过来，saturate(0) 已经去色，再加 grayscale(1) 就是冗余操作。
- 推荐固定顺序：先
blur()/drop-shadow()（模糊类），再调光类（brightness、contrast），最后调色类（saturate、grayscale） - 调试时可逐个注释 filter 函数，观察变化，比靠猜更可靠
- 不要用
saturate(100)这种极端值——不同设备渲染上限不同，有的会直接崩成噪点
React/Vue 中动态控制 contrast 和 saturate
在框架里绑定 filter 值，核心是拼字符串，别忘了空格分隔。容易错的是忘记转义或类型错误，比如把数字 1.2 当成字符串 "1.2" 没问题，但传入 null 或 undefined 会导致整个 filter 失效（浏览器忽略非法值）。
Vue 示例：:style="{ filter: `contrast(${contrastVal}) saturate(${saturateVal})` }"；React 类似，用模板字符串拼接即可。
- 确保
contrastVal和saturateVal是合法数字（可用parseFloat()或Number()做兜底） - 避免在循环中频繁设置 filter（比如表格每行一张图都动态算），会引起重绘抖动；静态图建议用 class 预设好几档，运行时只切 class
- SSR 场景下，服务端渲染时 filter 不生效（CSS filter 无法服务端计算），首屏看到的是原始图，JS 加载后才生效——这点常被忽略
contrast(0) 和 saturate(0) 在不同环境下的表现，最好本地真机验证一遍。 
