filter: invert(100%) 能直接反转图片颜色，但常因原图近灰度或css层叠干扰（如opacity、mix-blend-mode、缺失isolation）导致视觉无变化；需检查computed值、避免非法写法invert(100)、注意函数执行顺序及ios兼容性。
filter: invert(100%) 能直接反转图片颜色，但多数时候“没反应”不是写错了，而是原图特性或 CSS 层叠干扰导致视觉上无变化。
为什么 filter: invert(100%) 看起来没生效
最常见原因有两个：一是图片本身接近灰度（比如截图、扫描件、低饱和 PNG），invert() 对灰阶像素做 255 - value 运算后仍是灰阶，人眼几乎看不出差别；二是父容器设置了 opacity、mix-blend-mode，或未触发独立层叠上下文（例如父级有 transform 但没加 isolation: isolate），导致滤镜被合成逻辑截断。
实操建议：
- 用 DevTools 的 “Computed” 面板确认
filter是否计算为none，而不是规则被覆盖 - 给
<img>显式加上display: block——旧版 Safari 对行内元素的filter支持不稳定 - 避免写成
filter: invert(100)：invert(100%)或invert(1)合法，invert(100)是非法值，浏览器会忽略
invert() 和 grayscale() 混用时顺序决定结果
CSS filter 是从左到右依次执行的函数链，invert(100%) grayscale(100%) 和 grayscale(100%) invert(100%) 效果完全不同：
- 前者先反转再转灰度：得到反相灰度图（黑↔白，红→青→灰）
- 后者先去色再反转：更接近传统胶片负片效果（彩色图先变灰，再黑白翻转）
若目标是让图标在深色背景下高对比可见，单独用 invert(100%) 就够；若想降低色差干扰、专注明暗反转，可前置 grayscale(100%)。
iOS Safari 上 filter: invert(100%) 的硬伤
iOS 15.4+ 已完全支持，但 iOS 13–15.3 存在两个关键限制：
-
background-image上的filter不生效，只认<img>标签 - 硬件加速关闭时（如某些 WebView 或低电量模式），动画会明显卡顿
实操建议：对关键 UI 元素，优先用 <img src="x.jpg" class="invert"> + .invert { filter: invert(100%); }，避免依赖背景图；动画场景下加 will-change: filter 提前提示 GPU 加速。
别把 invert() 当深色模式自动切换方案
invert(100%) 是逐像素无差别取反，对彩色文本、半透明阴影、SVG 图标极易造成可读性崩坏（比如红色文字变青色，在白底上直接消失）。它不区分语义，也不理解前景/背景关系。
真正稳健的深色适配应基于 CSS 自定义属性 + @media (prefers-color-scheme: dark)，而 invert() 更适合临时调试、无障碍快速预览或装饰性效果。
复杂点在于：你得先判断这个图是不是真需要反转——一张灰度截图加了 invert(100%)，看起来和没加一样，不是 bug，是预期行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
