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%) — 变暗一半
让图片变暗一些以突出文字内容：
博思AIPPT
博思AIPPT来了，海量PPT模板任选，零基础也能快速用AI制作PPT。
117 查看详情
.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应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/960122.html
微信扫一扫 
支付宝扫一扫 
