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%);}
适用场景与注意事项
这个方法适合快速调整视觉表现，无需额外图片资源：
九歌
九歌–人工智能诗歌写作系统
322 查看详情
立即学习“前端免费学习笔记（深入）”；
鼠标悬停时提亮图片或按钮夜间模式下降低整体亮度禁用状态设置为灰暗（配合 opacity 或 saturate）
注意：brightness(0) 会使元素完全变黑（保留透明度），而 brightness(0%) 效果相同。避免在需要精确色彩还原的场景滥用 filter，可能影响可访问性。
基本上就这些。灵活使用 filter: brightness() 可以快速改善界面视觉反馈，不复杂但容易忽略。
以上就是如何通过css filter调整元素颜色亮度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030619.html
微信扫一扫 
支付宝扫一扫 
