在CSS中，filter属性可以为元素添加各种图形效果，其中hue-rotate和brightness是调整元素颜色和亮度的常用滤镜，两者可以单独使用，也可以组合使用来实现丰富的视觉效果。
hue-rotate滤镜基础用法
hue-rotate滤镜用于旋转元素内容的色相，参数接受角度值，单位可以是deg、rad、grad、turn，最常用的是deg。正值会让色相沿色环顺时针旋转，负值则逆时针旋转。
基础语法如下：
/* 单独使用hue-rotate滤镜 */
.target-element {
filter: hue-rotate(90deg);
}
示例：给一张图片添加色相旋转效果，将色相顺时针旋转120度：
.img-hue {
/* 色相旋转120度 */
filter: hue-rotate(120deg);
}
brightness滤镜基础用法
brightness滤镜用于调整元素的亮度，参数可以是百分比或者数值，默认值为1或者100%。值小于1或100%会降低亮度，值大于1或100%会提升亮度，0%会让元素完全变黑。
基础语法如下：
/* 单独使用brightness滤镜 */
.target-element {
filter: brightness(0.8);
}
示例：将按钮的亮度调整为原来的1.2倍，让按钮看起来更明亮：
.btn-bright {
/* 亮度提升20% */
filter: brightness(120%);
}
hue-rotate和brightness组合使用
多个滤镜可以同时写在filter属性中，用空格分隔即可，执行顺序是从左到右依次生效。
组合使用的语法示例：
/* 同时应用色相旋转和亮度调整 */
.combined-filter {
filter: hue-rotate(60deg) brightness(0.9);
}
实际场景示例：给卡片组件添加 hover 效果，鼠标悬浮时调整色相并提升亮度：
.card {
width: 300px;
height: 200px;
background-color: #4a90e2;
transition: filter 0.3s ease;
}
.card:hover {
/* 色相旋转30度，亮度提升10% */
filter: hue-rotate(30deg) brightness(110%);
}
使用注意事项
- filter属性会影响元素的所有视觉内容，包括子元素和伪元素，使用时需要注意影响范围。
- hue-rotate的旋转角度超过360deg时会循环生效，比如hue-rotate(450deg)效果和hue-rotate(90deg)一致。
- brightness参数如果设置为负数，浏览器会按照0来处理，不会生效。
- 滤镜效果会消耗一定的渲染性能，如果在大量元素或者动画中频繁使用，需要测试性能表现。
兼容性说明
目前主流现代浏览器都支持filter属性以及hue-rotate、brightness滤镜，包括Chrome、Firefox、Safari、Edge等。如果需要兼容旧版本浏览器，可以添加前缀：
.old-browser-support {
-webkit-filter: hue-rotate(45deg) brightness(0.95);
filter: hue-rotate(45deg) brightness(0.95);
}
CSSfilterhue-rotatebrightness修改时间：2026-07-19 18:27:19