如何实现图片色彩反转滤镜效果 使用 filter的invert属性实战案例|Duuu笔记
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%)
结果完全不同。
独响
一个轻笔记+角色扮演的app
下载
前者先反转再去色：得到的是反相灰度图（黑变白、白变黑）；后者先去色再反转：得到标准负片灰度效果（更接近传统胶片反转）。
典型需求：让彩色图标在深色模式下清晰可见 → 用
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
+
position: absolute
模拟，避免依赖
background-filter
（尚未标准化）
如需过渡动画，加上
will-change: filter
，但仅对频繁变化的元素启用，避免内存浪费
测试真机而非模拟器：iOS 模拟器常忽略 GPU 限制，而真机上
invert()
在 canvas 绘图中可能被降级为 CPU 渲染
实际用的时候，最易被忽略的是 filter 函数的执行顺序和父级合成上下文——它不像 JS 那样有明确报错，出问题时往往只是“看起来没变”，得一层层查 computed style 才能定位。
