答案：CSS saturate()函数可调整元素颜色饱和度，0%为灰度，100%为原色，大于100%更鲜艳，常用于图片图标色彩控制及hover交互效果，并可与其他filter叠加使用。
使用 CSS filter 属性可以轻松调整元素的颜色饱和度，特别适用于图片、图标或任何带有颜色的 HTML 元素。核心是利用 saturate() 函数来控制色彩的鲜艳程度。
saturate() 接受一个数值或百分比作为参数，用来增强或减弱元素的饱和度：
• 0% 表示完全去色，呈现灰度效果示例：
img {
filter: saturate(50%); /* 饱和度减半 */
}
<p>.icon {
filter: saturate(200%); /<em> 饱和度翻倍 </em>/
}</p>可以结合 hover 等状态实现交互效果，比如鼠标悬停时恢复颜色。
立即学习“前端免费学习笔记（深入）”；
.grayscale-on-load {
filter: saturate(30%);
transition: filter 0.3s ease;
}
<p>.grayscale-on-load:hover {
filter: saturate(100%);
}</p>这样元素默认偏灰，悬停时变得鲜艳，适合图库或按钮视觉反馈。
多个 filter 可以同时使用，用空格分隔。例如同时调整饱和度和亮度：
img {
filter: saturate(150%) brightness(90%);
}
注意顺序一般不影响最终视觉效果，但建议按逻辑排列便于维护。
基本上就这些，saturate() 是调试视觉表现非常实用的工具，尤其在不需要修改图像资源的情况下快速调整色彩风格。
以上就是如何用css filter调整元素颜色饱和度的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
498
收藏
