hue-rotate()不可控主因是原始色相分散，需先用grayscale/sepia压平再旋转；纯灰/黑/白图无效，svg图标应改用currentcolor方案更可靠。
直接用 filter 调整图片颜色可行，但效果是否可控，取决于原始图片的色彩构成——不是所有图都适合裸调 hue-rotate()，更不是加个 grayscale(1) 就算完成变色。
为什么 hue-rotate(180deg) 没让图片变蓝，反而发紫还带灰？
因为 hue-rotate() 是对每个像素的色相值统一加角度，不是“替换为蓝色”。一张含红（h≈0）、蓝（h≈220）、灰（h=undefined）的图，旋转 180° 后：红→青、蓝→橙、灰→仍灰，结果就是杂色乱飞。
- 先用 DevTools 吸管取图中主色、高光、阴影三处的 HSL h 值，若跨度 >60°，说明色相太散，
hue-rotate()单独用大概率失控 - 纯黑/白/灰图（
grayscale(100%)）上用hue-rotate()完全无效——色相无定义 -
hue-rotate()必须放在filter值最前面，否则被后面的brightness()或contrast()压缩色域，导致发灰
真正能稳控颜色的预处理组合
对多数真实 UI 图片（尤其按钮图标、产品图），靠单滤镜不行，得压平再旋转：
- 先用
grayscale(0.9) sepia(0.7)把多色层次“揉”成近似单色基底，再叠hue-rotate(XXdeg)——比裸调更易对齐目标色 - 低饱和图（比如旧照片）加
saturate(1.4)再调色相，否则旋转后更脏 - 想偏暖就用
hue-rotate(-15deg)，偏冷用hue-rotate(20deg)，别硬套 90/180/270；微调 ±5deg 比重设更有效
SVG 图标变色别硬套 hue-rotate()
绝大多数 SVG 图标是纯黑 #000 或纯白 #fff，没有色相，hue-rotate() 对它完全没反应。
- 确认方式：DevTools 吸管点图标，看 RGB 是否接近 (0,0,0) 或 (255,255,255)
- 强行“唤醒”色相可用
grayscale(0%) brightness(0.1) sepia(1)，但参数敏感、效果难复现 - 更可靠方案：把 SVG 内联，原图
fill改成currentColor，CSS 里只控制父元素color——语义清晰、主题切换零成本
iOS Safari 和 Firefox 的兼容性坑
不是不支持 hue-rotate()，而是渲染路径不同导致效果漂移或动画卡顿：
- iOS Safari 中，配合
position: fixed或transform: translateZ(0)时，文字可能突然变暗、闪烁甚至消失；解法是套一层<span></span>wrapper，只对 wrapper 应用filter - Firefox 对文本节点的
filter支持弱于 Chrome，hue-rotate动画易跳帧；加will-change: filter可缓解，但别滥用，否则触发多余合成层 - 真机调试颜色异常，先关系统深色模式——macOS / iOS 17+ 的系统级色彩管理会覆盖 CSS 滤镜输出
最难的从来不是写出 filter: hue-rotate(120deg)，而是判断这张图到底有没有可调的色相基础、要不要先压灰再唤醒、以及该不该换用 currentcolor 这类更底层的控制方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
