hue-rotate() 通过旋转色相环改变颜色，非直接加红；偏红需据原图主色调调整角度，黑白图无效，须先取消灰度；作用域需隔离图标元素；应将 hue-rotate() 置于 filter 链首位以防发灰；ios safari 存在兼容性问题，需兜底方案。
filter 的 hue-rotate() 怎么让图片整体偏红或偏青
直接调 hue-rotate() 是最常用也最容易误用的方式。它不是“加红色”，而是把整张图的色相环旋转指定角度，所以偏红不等于设 hue-rotate(0deg)，而要看原图主色调在哪——比如一张偏黄的图，转 60deg 可能变绿，转 210deg 才变红。
实操建议：
- 用
hue-rotate(90deg)试试效果，再 ±30deg 微调，比凭空猜角度快得多 - 如果原图是黑白（灰度），
hue-rotate()完全无效，得先加grayscale(0%)或去掉已有grayscale(100%) - 浏览器对
hue-rotate()的插值不一致，Chrome 渲染偏暖，Firefox 偏冷，上线前务必真机检查
想只给图标变色，但不影响文字和背景怎么办
关键在作用域控制——filter 默认作用于整个元素及其所有子元素，所以直接写在按钮上，文字也会跟着偏色。必须把图像单独抽成独立可滤镜容器。
实操建议：
- 把图标用
<svg></svg>或<img>单独包裹一层<span class="icon"></span>，然后只给这个span加filter - 避免用
background-image实现图标，因为 background 不受filter影响（除非整个元素设filter，又会连带文字） - 若必须用伪元素
::before插入图标，记得设content: ""+background后，再用filter，但注意 Safari 对伪元素filter支持不稳定
filter: contrast() / brightness() 搭配 hue-rotate() 为什么越调越灰
这是叠加顺序导致的隐性降噪：当 brightness(0.5) 把像素压暗、contrast(0.3) 压缩色阶后，再跑 hue-rotate()，可操作的色彩范围已经严重缩水，结果就是发灰、发闷。
实操建议：
- 把
hue-rotate()放在 filter 链最前面，比如filter: hue-rotate(180deg) brightness(1.2) contrast(1.1) - 避免同时用
saturate(0%)和hue-rotate()，前者已抹掉所有色相信息，后者就失效了 - 调试时用 DevTools 实时拖动 filter 参数，观察渲染变化比写死数值更可靠
filter 在 iOS Safari 上颜色不准甚至失效
iOS 15.4 之前，Safari 对 filter 的硬件加速有 bug，尤其多层嵌套或配合 transform 时，hue-rotate() 会跳变或卡在某个中间色。iOS 16+ 修复明显，但旧机型仍常见。
实操建议：
- 加兜底：用
@supports (filter: hue-rotate(1deg))包裹滤镜样式，否则 fallback 到svg filter或 CSS 变量控制的 tint 色 - 避免在
position: fixed元素上用复杂 filter，iOS 容易触发渲染异常 - 真机测试不能只看 Simulator，老款 iPhone SE（第一代）的 GPU 处理
filter明显吃力，轻微卡顿都可能影响色彩还原
真正难的不是调出一个好看的颜色，而是让同一组参数在不同设备、不同亮度模式、不同系统版本下看起来差不多。这点常被忽略，但上线后用户截图发群里问“为啥我的图标是紫的”，八成出在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
