filter: invert(1) 未生效主因是根元素被 transform/opacity 等创建层叠上下文或 body 的 overflow-x:hidden 阻断合成；应优先设于 html 并确保无样式干扰、添加宽高 100%、注意浏览器差异与性能影响。
filter: invert(1) 为什么没生效？检查根元素是否被重置
直接在 html 或 body 上写 filter: invert(1) 常常无效，根本原因是浏览器默认对 body 应用 overflow-x: hidden，而部分渲染引擎（尤其 Chrome）在该条件下会跳过滤镜合成。更常见的是，CSS 框架或重置样式（比如 normalize.css）悄悄给 html 或 body 加了 transform、will-change 或 opacity，这些属性会创建独立层叠上下文，导致 filter 无法作用于整个视口。
实操建议：
- 优先加在
html上，而不是body—— 因为body默认是块级容器，但它的渲染边界不等于视口；html才真正代表文档根 - 确保没有其他样式干扰：临时移除所有第三方 CSS，或用开发者工具检查 computed 样式中
filter是否被覆盖或计算为none - 加上
height: 100%和width: 100%到html，避免某些旧版 Safari 下滤镜只作用于内容高度而非全屏
invert(1) 反转后图片/视频发灰？这是预期行为，不是 bug
filter: invert(1) 是按颜色通道做线性反转（rgb(255,0,0) → rgb(0,255,255)），但它不区分语义——图标、文字、照片、视频帧全部一视同仁。所以 PNG 透明区域变成黑底、JPEG 色彩层次被拉平、带 alpha 的 SVG 图标边缘出现灰边，都是正常结果。
使用场景要明确：这个方案只适合快速调试、无障碍临时模式、或纯色 UI 的高对比翻转。它不适合内容型页面（比如图文博客、电商详情页）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 如果只想反转文字和背景，避开媒体元素，改用
color-scheme: dark+background-color/color手动控制 - 若必须保留图片可读性，得配合
picture元素的media查询，或用 JS 动态给img加style="filter: invert(1) contrast(1.2)"单独调优 - 注意
invert()对 CSS 渐变无效（background: linear-gradient(...)不会被反转），得手动换色值
Chrome/Firefox/Safari 行为不一致？重点看合成层和 color-gamut
Firefox 通常最守规矩，html { filter: invert(1) } 开箱即用；Chrome 从 v110 起修复了大部分 overflow 导致的失效问题，但仍可能因 prefers-reduced-motion 或硬件加速开关影响表现；Safari（尤其是 iOS）对 filter 在根元素上的支持较弱，且会忽略 invert() 对 video 和 canvas 的作用。
性能影响明显：全屏 invert(1) 会让页面强制走 GPU 合成，在低端 Android 设备上容易掉帧，滚动卡顿。
实操建议：
- 加
@supports (filter: invert(1))做特性检测，避免老浏览器白屏 - 避免同时开多个滤镜：
filter: invert(1) hue-rotate(90deg)比单个invert贵得多，移动端慎用 - Safari 用户可 fallback 到
-webkit-filter: invert(1)（虽然现代 Safari 已不需要前缀，但某些 WKWebView 版本仍需）
如何让 invert(1) 不影响 iframe 和第三方组件？
filter 是继承性属性，但 iframe 内容属于独立文档上下文，不会被父页面的 filter 影响——这点常被误以为“失效”，其实是设计如此。真正麻烦的是 Web Components（如 Shadow DOM）或通过 attachShadow 创建的封闭节点：它们默认不继承 filter，除非显式设 inherit。
实操建议：
- iframe 安全隔离是好事，无需处理；若需统一反转，只能让 iframe 内部自己加
html { filter: invert(1) } - 对自定义元素，可在其 shadow root 的
:host上加filter: inherit，否则滤镜会止步于 shadow boundary - React/Vue 组件里动态插入的子元素（比如弹窗、Tooltip）若挂载到
document.body，它们会脱离根html的滤镜作用域，必须单独加 filter
invert(1) 看似简单，实际牵扯渲染层、色彩空间、跨文档边界和框架挂载逻辑。最容易被忽略的，是它根本不反转 CSS 自定义属性（var(--bg)）、伪元素生成的内容（::before 的 content 文本），以及任何由 JS 动态写入 innerHTML 但未触发重绘的节点。
