如何在CSS中使用颜色滤镜filter 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%) — 变暗一半

让图片变暗一些以突出文字内容：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

.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中使用颜色滤镜filter hue-rotate brightness应用的详细内容，更多请关注php中文网其它相关文章！