答案:CSS filter 属性通过 hue-rotate() 调整色相,brightness() 控制亮度,可组合使用实现图像或元素的视觉效果优化。

在CSS中,filter 属性可以用来对元素(如图片、文本或容器)应用图形效果,比如模糊、亮度调整、色相旋转等。其中 hue-rotate() 和 brightness() 是两个常用的滤镜函数,分别用于调整颜色的色相和明暗程度。
hue-rotate():调整色相
hue-rotate() 函数用于改变元素的颜色色调。它通过旋转色相环上的角度来实现颜色变化,单位是度(deg),范围从 0 到 360。
例如:
- filter: hue-rotate(0deg); — 颜色不变
- filter: hue-rotate(90deg); — 向绿色/黄色方向偏移
- filter: hue-rotate(180deg); — 变成相反色(如红变青)
- filter: hue-rotate(360deg); — 回到原始颜色
实际使用示例:
立即学习“前端免费学习笔记(深入)”;
img { filter: hue-rotate(120deg); }这会让图片整体色调向绿色或蓝色方向偏移。
brightness():调整亮度
brightness() 控制元素的明暗程度,接受一个无单位数值或百分比。
- filter: brightness(0); — 完全黑(关闭亮度)
- filter: brightness(50%); — 半暗
- filter: brightness(1); 或 brightness(100%) — 正常亮度
- filter: brightness(1.5); 或 brightness(150%) — 更亮
- filter: brightness(2); — 亮度翻倍,可能过曝
常见用途:制作悬停高亮效果
img:hover {
filter: brightness(1.2);
}
组合使用多个滤镜
你可以同时使用多个滤镜,只需将它们用空格分隔写在同一行。
img { filter: hue-rotate(45deg) brightness(80%); }这个例子会先旋转色调再降低亮度,适合营造复古或柔和的视觉风格。
注意:filter 属性会影响整个元素及其子元素,通常用于图片、图标或背景图。对于文字,也可以使用,但需注意可读性。
基本上就这些。灵活搭配 hue-rotate 和 brightness,可以在不替换资源的情况下快速调整视觉效果。










