如何在CSS中使用颜色滤镜filter hue-rotate brightness应用

新闻中心 NEWS CENTER

2025-11-18

浏览次数：次

hue-rotate()调整色相，brightness()调节亮度，两者可组合使用实现图片色彩与明暗的动态控制，常用于悬停交互效果，需注意性能影响。

如何在css中使用颜色滤镜filter hue-rotate brightness应用

在CSS中使用 filter 属性可以对元素（尤其是图片）进行视觉效果处理，其中 hue-rotate() 和 brightness() 是两个常用的滤镜函数。它们可以单独使用，也可以组合起来实现更丰富的色彩效果。

hue-rotate() 用于调整元素颜色的色相，单位是度（deg），取值范围从 0deg 到 360deg。它会围绕色轮旋转颜色。

常见用法示例：

例如，将一张图片整体变成暖色调：

img {
  filter: hue-rotate(60deg);
}

brightness() 控制元素的明暗程度。参数是一个无单位数值或百分比。

常用值说明：

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

ChatCut

AI视频剪辑工具

1086 查看详情 ChatCut

.card img {
  filter: brightness(70%);
}

你可以把 hue-rotate() 和 brightness() 写在同一个 filter 属性中，顺序会影响最终效果。

.artwork {
  filter: hue-rotate(120deg) brightness(90%);
}

这个例子先旋转色相再调整亮度。如果你交换顺序，视觉结果可能会略有不同，尤其是在复杂图像上。

示例：悬停时改变色相并提亮

img:hover {
  filter: hue-rotate(45deg) brightness(110%);
  transition: filter 0.4s ease;
}

基本上就这些。灵活组合 hue-rotate 和 brightness，能让你在不换图的情况下实现多种视觉风格。

以上就是如何在CSS中使用颜色滤镜filter hue-rotate brightness应用的详细内容，更多请关注其它相关文章！