hue-rotate()通过filter属性旋转元素色相，参数为0–360deg角度值，0deg为原色，180deg反色，360deg复原；对灰度图无效，需配合saturate()，且不支持IE及旧版Safari。

直接用 filter: hue-rotate() 就行，但要注意它只作用于整个元素（包括透明通道），且不支持 IE 和旧版 Safari。

为什么 hue-rotate() 看起来没反应？

常见原因不是写法错，而是图片本身或上下文干扰了效果：

• 图片是灰度图（饱和度为 0）——hue-rotate() 对无色相的像素无效，先加 saturate(2) 再试
• 父容器或自身有 opacity 或其他 filter（如 blur()）——多个 filter 会叠加，但顺序影响视觉结果，建议合并写成单条 filter 声明
• 用了 PNG 且带 alpha 通道 —— 色相旋转会作用于半透区域，可能让边缘发“脏”，可临时加 background: white 对比验证

hue-rotate() 的参数和单位怎么填？

只接受一个角度值，单位必须是 deg（也可省略），范围不限，但每 360° 循环一次：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• hue-rotate(90deg) → 红变绿、绿变蓝、蓝变红
• hue-rotate(-120deg) 等价于 hue-rotate(240deg)
• 填 0deg 不代表“关闭”，而是“重置为原始色相”；想关掉就得删掉整个 filter 或设为 none
• 动画时建议用 0deg → 360deg，避免跳变（比如从 359deg 突然跳回 0deg）

怎么让单张图片局部变色相？

hue-rotate() 是全元素生效的，真要局部控制，得绕路：

• 用 手动读取像素、改 HSL 色相、重绘——适合动态需求，但性能开销大
• 把图片切图，用不同 filter 分别套在不同 或伪元素上——适合静态布局
• 导出多张预处理图（如用 Photoshop 批量生成 hue-shifted 版本），用 JS 切换 src——最兼容，也最省算力
• CSS mask-image + hue-rotate() 组合可实现“仅对遮罩区生效”，但 mask 兼容性更差（Chrome ≥ 118，Firefox 需前缀）

真正麻烦的不是写法，而是设计意图和浏览器行为的错位：你以为在调一张图，其实是在调它的渲染层——alpha、混合模式、硬件加速开关，都可能让 hue-rotate() 表现不一致。上线前务必在真机上用实际图片测。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！