CSS滤镜教程：hue-rotate与brightness详解

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《CSS颜色滤镜使用教程：hue-rotate与brightness应用》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

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，能让你在不换图的情况下实现多种视觉风格。

终于介绍完啦！小伙伴们，这篇关于《CSS滤镜教程：hue-rotate与brightness详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！