答案是通过CSS filter属性可调整元素颜色表现，具体包括brightness()调节明暗、contrast()控制对比度、saturate()调整饱和度、hue-rotate()改变色调、invert()反转颜色，并支持多函数组合使用，适用于图像文本等视觉效果优化，但影响性能且不适用于精确颜色替换场景。
在 CSS 中，可以通过 filter 属性来调整元素的颜色表现。它主要用于对图像、文本或容器视觉效果进行后期处理，比如改变色调、饱和度、亮度等。虽然 filter 不能直接“替换”颜色，但能通过多种滤镜函数实现颜色的调整。
1. 使用 brightness() 调整明暗
这个函数用于控制元素的亮度。
值大于 1 会变亮，小于 1 变暗，0 完全黑。
示例：
立即学习“前端免费学习笔记（深入）”；
-
filter: brightness(50%);—— 变暗 -
filter: brightness(1.5);—— 更亮
2. 使用 contrast() 调整对比度
增强或减弱颜色之间的对比。
1 是原始对比，小于 1 降低对比，大于 1 增强。
-
filter: contrast(200%);—— 高对比，颜色更鲜明 -
filter: contrast(50%);—— 接近灰蒙蒙的效果
3. 使用 saturate() 控制饱和度
调整颜色的鲜艳程度。
0 完全去色（变灰），值越高越鲜艳。
-
filter: saturate(0);—— 灰度图 -
filter: saturate(2);—— 饱和度翻倍
4. 使用 hue-rotate() 改变色调
这是最接近“调整颜色”的方法之一。通过旋转色相，使整体颜色偏移。
单位是 deg（度），360deg 是一圈。
-
filter: hue-rotate(90deg);—— 整体颜色向绿色/黄色偏移 -
filter: hue-rotate(180deg);—— 色彩反转色调
5. 使用 invert() 反转颜色
将所有颜色反转，常用于夜间模式模拟。
1 表示完全反转，0 不变。
-
filter: invert(100%);—— 黑变白，红变青等
6. 组合多个 filter 函数
你可以把多个滤镜组合使用，实现复杂调色效果。
示例：
立即学习“前端免费学习笔记（深入）”；
filter: hue-rotate(180deg) saturate(2) brightness(0.9);filter: brightness(70%) contrast(120%) saturate(1.5);
顺序不影响最终结果，浏览器会合并处理。
7. 注意事项
- filter 影响整个元素及其子元素的渲染外观
- 对性能有一定影响，尤其在动画中频繁使用时
- 适用于图片、图标、文字、背景等视觉内容
- 不适用于需要精确颜色替换的场景（如 SVG 单色填充）
基本上就这些。用好 filter 能快速实现丰富的视觉调整，无需额外图片或 JS。关键是理解每个函数的作用并合理组合。
