hue-rotate()调整色相，brightness()调节亮度，两者可组合使用实现图片色彩与明暗的动态控制，常用于悬停交互效果，需注意性能影响。
在CSS中使用 filter 属性可以对元素（尤其是图片）进行视觉效果处理，其中 hue-rotate() 和 brightness() 是两个常用的滤镜函数。它们可以单独使用，也可以组合起来实现更丰富的色彩效果。
hue-rotate() 色相旋转
hue-rotate() 用于调整元素颜色的色相，单位是度（deg），取值范围从 0deg 到 360deg。它会围绕色轮旋转颜色。
常见用法示例：- filter: hue-rotate(0deg); — 颜色不变
- filter: hue-rotate(90deg); — 向绿色/黄色方向偏移
- filter: hue-rotate(180deg); — 偏向青色或紫色调
- filter: hue-rotate(-90deg); — 向紫色/品红色方向偏移
例如，将一张图片整体变成暖色调：
img {
filter: hue-rotate(60deg);
}
brightness() 亮度调节
brightness() 控制元素的明暗程度。参数是一个无单位数值或百分比。
立即学习“前端免费学习笔记（深入）”；
常用值说明：- brightness(0) 或 brightness(0%) — 完全黑色
- brightness(1) 或 brightness(100%) — 原始亮度，无变化
- brightness(2) 或 brightness(200%) — 更亮，可能过曝
- brightness(0.5) 或 brightness(50%) — 变暗一半
让图片变暗一些以突出文字内容：
.card img {
filter: brightness(70%);
}
组合使用多个滤镜
你可以把 hue-rotate() 和 brightness() 写在同一个 filter 属性中，顺序会影响最终效果。
.artwork {
filter: hue-rotate(120deg) brightness(90%);
}
这个例子先旋转色相再调整亮度。如果你交换顺序，视觉结果可能会略有不同，尤其是在复杂图像上。
适用场景与注意事项
- 常用于图片、图标、背景图的动态美化
- 配合:hover实现交互效果，比如鼠标悬停时变亮并变色
- 注意性能：filter在大图或多元素上可能影响渲染速度，可结合 will-change 或 transform 使用优化
- 部分老版本浏览器需加前缀，但现代浏览器基本都支持
示例：悬停时改变色相并提亮
img:hover {
filter: hue-rotate(45deg) brightness(110%);
transition: filter 0.4s ease;
}
基本上就这些。灵活组合 hue-rotate 和 brightness，能让你在不换图的情况下实现多种视觉风格。
