brightness()函数可调节元素亮度，值小于100%变暗，大于100%变亮，常用于图片、图标等视觉调整，支持与其他filter组合使用，如contrast、invert等，适用于悬停效果、夜间模式等场景，注意避免影响色彩还原和可访问性。
通过 CSS filter 属性可以轻松调整元素的颜色亮度，适用于图片、图标、文字或其他视觉内容。其中 brightness() 函数是控制亮度的核心工具。
使用 brightness() 调整亮度
brightness() 函数用于改变元素的明亮程度。它的值是一个无单位数字或百分比：
- 1 或 100%：保持原始亮度
- 小于 1 或 100%：变暗（例如 0.5 或 50%）
- 大于 1 或 100%：变亮（例如 1.5 或 150%）
.darken {
filter: brightness(50%);
}
.brighten {
filter: brightness(180%);
}
.completely-dark {
filter: brightness(0%); / 完全变黑 /
}
.invert-and-brighten {
filter: invert(1) brightness(200%); / 白底黑图变亮 /
}
与其他 filter 配合使用
你可以将 brightness() 和其他 filter 函数组合使用，实现更丰富的视觉效果。多个函数之间用空格分隔：
- contrast()：增强或减弱对比度
- invert()：反转颜色
- hue-rotate()：调整色相
.vibrant {
filter: brightness(120%) contrast(110%);
}适用场景与注意事项
这个方法适合快速调整视觉表现，无需额外图片资源：
立即学习“前端免费学习笔记（深入）”；
- 鼠标悬停时提亮图片或按钮
- 夜间模式下降低整体亮度
- 禁用状态设置为灰暗（配合 opacity 或 saturate）
注意：brightness(0) 会使元素完全变黑（保留透明度），而 brightness(0%) 效果相同。避免在需要精确色彩还原的场景滥用 filter，可能影响可访问性。
基本上就这些。灵活使用 filter: brightness() 可以快速改善界面视觉反馈，不复杂但容易忽略。
