hue-rotate()通过filter属性旋转元素色相，参数为0–360deg角度值，0deg为原色，180deg反色，360deg复原；对灰度图无效，需配合saturate()，且不支持IE及旧版Safari。
直接用 filter: hue-rotate() 就行，但要注意它只作用于整个元素（包括透明通道），且不支持 IE 和旧版 Safari。
为什么 hue-rotate() 看起来没反应？
常见原因不是写法错，而是图片本身或上下文干扰了效果：
- 图片是灰度图（饱和度为 0）——
hue-rotate()对无色相的像素无效，先加saturate(2)再试 - 父容器或自身有
opacity 或其他 <code>filter（如blur()）——多个 filter 会叠加，但顺序影响视觉结果，建议合并写成单条filter声明 - 用了 PNG 且带 alpha 通道 —— 色相旋转会作用于半透区域，可能让边缘发“脏”，可临时加
background: white对比验证
hue-rotate() 的参数和单位怎么填？
只接受一个角度值，单位必须是 deg（也可省略），范围不限，但每 360° 循环一次：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
hue-rotate(90deg)→ 红变绿、绿变蓝、蓝变红 -
hue-rotate(-120deg)等价于hue-rotate(240deg) - 填
0deg不代表“关闭”，而是“重置为原始色相”；想关掉就得删掉整个 filter 或设为none - 动画时建议用
0deg → 360deg，避免跳变（比如从359deg突然跳回0deg）
怎么让单张图片局部变色相？
hue-rotate() 是全元素生效的，真要局部控制，得绕路：
立即学习“前端免费学习笔记（深入）”；
- 用
<canvas></canvas>手动读取像素、改 HSL 色相、重绘——适合动态需求，但性能开销大 - 把图片切图，用不同
filter分别套在不同<img alt="HTML怎么做图片色相旋转_html CSS图片色相hue-rotate旋转【整理】" >或伪元素上——适合静态布局 - 导出多张预处理图（如用 Photoshop 批量生成 hue-shifted 版本），用 JS 切换
src——最兼容，也最省算力 - CSS
mask-image+hue-rotate()组合可实现“仅对遮罩区生效”，但 mask 兼容性更差（Chrome ≥ 118，Firefox 需前缀）
真正麻烦的不是写法，而是设计意图和浏览器行为的错位：你以为在调一张图，其实是在调它的渲染层——alpha、混合模式、硬件加速开关，都可能让 hue-rotate() 表现不一致。上线前务必在真机上用实际图片测。
