invert() 逐像素翻转rgb值而非语义反色，导致文字对比度骤降、颜色失真；它不识别深色模式、不处理alpha通道、不作用于svg/渐变/伪元素，需配合hue-rotate()微调且不可被color-mix()替代。
filter: invert() 为什么反转后文字看不清
因为 invert() 是无差别逐像素翻转 RGB 值，不是“语义化反色”。红(#ff0000) → 青(#00ffff)，但青在白底上对比度极低；深灰文字(#333)翻成浅灰(#ccc)，直接糊成一片。它不识别文本、图标、背景的语义角色，也不管当前是否已处于深色模式。
常见错误现象：
-
filter: invert()加在body上没反应——大概率是html或body被transform、opacity、will-change触发了独立层叠上下文，滤镜被隔离失效 - 图片边缘发灰、PNG 透明区变黑——这是正常行为，
invert()对 alpha 通道不做特殊处理，只翻 RGB - 按钮变青、图标变糊、SVG 渐变消失——所有颜色通道被线性翻转，饱和度保留但色相崩坏
实操建议：
- 想全局启用，必须加在
html元素上，并确保html { width: 100%; height: 100% } - 避免和
sepia()、grayscale()混用——它们会提前吃掉色相信息，让后续hue-rotate()失效 - 别用
invert(1)——这是非法写法，浏览器会忽略；合法写法只有invert(100%)或简写invert()
invert() + hue-rotate() 组合怎么调才不刺眼
纯 invert() 把红色拉成青色、蓝色拉成黄色，视觉上突兀且难读。补一个 hue-rotate() 可把主色调往回扳，压住色偏，让反转结果更接近黑/白/灰系。
常用组合（按实际 UI 主色微调）：
-
filter: invert() hue-rotate(180deg)：适合红/蓝主色按钮，能明显抑制青黄溢出 -
filter: invert(90%) hue-rotate(200deg)：保留一点原色感，避免完全失真，适合品牌色敏感场景 - 慎用
hue-rotate(360deg)或倍数——等于没转，起不到修复作用
注意：hue-rotate() 对已近灰度的元素（如 #888 文字）几乎无效，它只对带明确色相的颜色起作用。
color-mix() 能替代 invert() 实现颜色反转吗
不能。color-mix() 是 CSS Color Level 4 新增函数，用于混合两种颜色（比如 color-mix(in srgb, red 50%, white 50%)），但它不提供“自动取反”能力。没有 color-mix(in srgb, currentColor 100%, invert) 这种语法，也没有内置反转关键词。
目前（2026 年 5 月）color-mix() 的真实用途是：
- 手动构造中间色，替代重复定义的变量（如按钮悬停态）
- 配合
color-scheme: dark动态计算适配色（例如color-mix(in lch, black 30%, currentColor 70%)） - 它不作用于整个元素，只生成单个颜色值，无法一键反转文字+背景+图片
所以想做页面级反转，color-mix() 不是替代方案，而是补充工具——你仍得靠 invert() 打底，再用 color-mix() 单独调某个按钮的 hover 色。
深色模式下用 invert() 为什么更危险
系统深色模式下，背景已是 #121212，文字是 #e0e0e0。invert() 会把背景翻成 #ededed，文字翻成 #1f1f1f，结果变成“浅灰字+浅灰底”，对比度可能跌破 2:1，完全不可读。
这不是 bug，是设计使然——invert() 根本不感知 @media (prefers-color-scheme: dark)，也不理解 WCAG 对比度要求。
实操建议：
- 不要用
invert()实现“深色模式”，该用:root变量 +prefers-color-scheme媒体查询 - 如果真要支持“一键高对比反转”功能，请先用 JS 读取当前
getComputedStyle(el).backgroundColor和color，算亮度，再决定是否启用invert()或改用contrast(2) brightness(1.2) - 所有 SVG 图标、
background-image、CSS 渐变都不会被invert()影响——它们得单独重写或用picture+media切换
最易被忽略的一点：invert() 对伪元素 ::before/::after 默认不生效，必须显式加 filter 才行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
