invert()能直接反转图片颜色，原理是线性反转rgb各通道值（0↔255），并非简单变黑白；常见误判源于原图近灰度或父级css干扰导致滤镜未生效。
invert() 能直接反转图片颜色吗
能，但效果常被误判为“变黑白”或“发灰”。invert() 是线性反转每个通道的 RGB 值：0 → 255，128 → 128，255 → 0。对彩色图它确实翻转色相（红变青、绿变紫），但人眼容易只注意到对比度变化，尤其当原图含大量灰阶时。
常见错误现象：filter: invert(100%) 应用后图片看起来“没变”或“只是变暗”，其实是原图本身接近灰度（如截图、文档扫描件），反转后仍近似灰度。
- 使用场景：快速高对比预览、无障碍模式切换、临时调试视觉层次
- 注意
invert()不等价于 “去色+反相”，它不改变饱和度，也不转 HSL；想保彩度反转，请搭配hue-rotate(180deg) - 性能影响极低，所有现代浏览器原生支持，无渲染回退问题
为什么加了 invert(100%) 还是没反应
最常见原因是图片被父容器或自身设置了 opacity、mix-blend-mode 或 isolation: isolate，导致滤镜未生效或被合成覆盖。
实操建议：
- 检查是否遗漏
img元素的display: block—— 行内元素在某些旧版 Safari 中可能忽略 filter - 确认没有父级设置了
transform且未触发新层叠上下文，否则filter可能被截断 - 用 DevTools 的“Computed”面板直接查看
filter是否计算为none，而非 CSS 规则被覆盖 - 避免写成
filter: invert(1);—— 数值单位必须是百分比（invert(100%)）或无单位小数（invert(1)合法，但invert(100)非法）
invert 和 grayscale 混用时顺序很重要
CSS filter 是从左到右执行的函数链，invert(100%) grayscale(100%) 和 grayscale(100%) invert(100%) 结果完全不同。
前者先反转再去色：得到的是反相灰度图（黑变白、白变黑）；后者先去色再反转：得到标准负片灰度效果（更接近传统胶片反转）。
- 典型需求：让彩色图标在深色模式下清晰可见 → 用
invert(100%)单独即可 - 若需兼容色盲用户，建议组合
invert(100%) contrast(1.2)，单纯 invert 可能降低可读性 - 不要依赖多 filter 的“叠加感”：CSS 不支持 alpha 混合式叠加，每个 filter 独立作用于上一结果
移动端 iOS Safari 的 invert 兼容细节
iOS 15.4+ 完全支持，但 iOS 13–15.3 存在两个隐蔽问题：一是 background-image 上的 filter 不生效（仅 <img> 标签支持），二是硬件加速关闭时动画卡顿明显。
实操建议：
- 对背景图需反转，改用
img+position: absolute模拟，避免依赖background-filter（尚未标准化） - 如需过渡动画，加上
will-change: filter，但仅对频繁变化的元素启用，避免内存浪费 - 测试真机而非模拟器：iOS 模拟器常忽略 GPU 限制，而真机上
invert()在 canvas 绘图中可能被降级为 CPU 渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
