答案：CSS saturate()函数可调整元素颜色饱和度，0%为灰度，100%为原色，大于100%更鲜艳，常用于图片图标色彩控制及hover交互效果，并可与其他filter叠加使用。
使用 CSS filter 属性可以轻松调整元素的颜色饱和度，特别适用于图片、图标或任何带有颜色的 HTML 元素。核心是利用 saturate() 函数来控制色彩的鲜艳程度。
1. saturate() 函数的基本用法
saturate() 接受一个数值或百分比作为参数，用来增强或减弱元素的饱和度：
• 0% 表示完全去色，呈现灰度效果• 100% 表示保持原始饱和度（无变化）
• 大于 100% 增加饱和度，颜色更鲜艳
• 小于 100% 降低饱和度，颜色变淡
示例：
img {
filter: saturate(50%); /* 饱和度减半 */
}
.icon {
filter: saturate(200%); / 饱和度翻倍 /
}
2. 动态交互中的应用
可以结合 hover 等状态实现交互效果，比如鼠标悬停时恢复颜色。
立即学习“前端免费学习笔记（深入）”；
.grayscale-on-load {
filter: saturate(30%);
transition: filter 0.3s ease;
}
.grayscale-on-load:hover {
filter: saturate(100%);
}
这样元素默认偏灰，悬停时变得鲜艳，适合图库或按钮视觉反馈。
3. 与其他 filter 效果叠加
多个 filter 可以同时使用，用空格分隔。例如同时调整饱和度和亮度：
img {
filter: saturate(150%) brightness(90%);
}
注意顺序一般不影响最终视觉效果，但建议按逻辑排列便于维护。
基本上就这些，saturate() 是调试视觉表现非常实用的工具，尤其在不需要修改图像资源的情况下快速调整色彩风格。
