mix-blend-mode: difference 本身不自动适配背景色，需配合 isolation: isolate、color: white 及严格 DOM 结构才能实现反色效果；失效主因是隐式 stacking context 中断混合链路。
mix-blend-mode 本身不能让按钮“随背景变色”，它只做图层混合运算；真正起作用的是你选的混合模式（如 difference）和按钮颜色的固定设定——比如始终用 color: white，靠差值混合“算出”视觉上的反色效果。
为什么直接给 <button> 加 mix-blend-mode: difference 没反应
90% 的失效不是写错代码，而是图层关系被隐式切断：
- 按钮父容器用了
opacity: 0.99、filter: blur(0)或transform→ 自动创建新 stacking context，混合链路中断 - 按钮嵌套在多层
<div>中，其中某一级有position: relative+z-index→ 隔离了混合所需的相邻图层 - 背景是
background-image，但按钮外层又套了带rgba(0,0,0,0.1)的遮罩层 →difference是跟整张图算差值，结果发灰、边缘模糊 - 没加
isolation: isolate，而父容器恰好有其他触发层叠上下文的属性（哪怕只是will-change: auto）
按钮必须用 color: #ffffff 或 color: #000000 才行
中间色在混合后极易崩坏对比度：
-
color: #666在#808080背景上执行difference，结果仍是#7f7f7f，WCAG 对比度直接不达标 -
color: #ffffff是最稳妥选择：深色背景 → 算出亮色文字；浅色背景 → 算出暗色文字 - 别指望它“智能识别背景”，它只是做
|R₁ − R₂|运算，纯黑/纯白背景效果最可靠 - 必须用
@supports (mix-blend-mode: difference)包裹样式，否则 Safari ≤15.3、Android WebView 69 会静默回退成默认色
安全可用的 DOM 结构和 CSS 写法
按钮要生效，结构必须“锁死”混合路径：
立即学习“前端免费学习笔记（深入）”；
- 按钮必须是背景容器的直接子元素，不能隔一层 wrapper：
<div class="bg-container"><button>Click</button></div>✅，而不是<div><div><button></button></div></div>❌ - 背景必须由该容器的
background-color或background-image直接提供，不能靠子元素撑开高度 - CSS 必须同时声明：
isolation: isolate（强制成为混合锚点）、mix-blend-mode: difference、color: white - 删掉所有可能触发新 stacking context 的属性：
opacity、filter、will-change、transform（哪怕值是none）
```css
.bg-container {
isolation: isolate;
background: linear-gradient(135deg, #1a1a2e, #16213e);
}
.bg-container button {
color: white;
mix-blend-mode: difference;
border: none;
background: transparent;
padding: 8px 16px;
}
```真正容易被忽略的是 stacking context 的隐式创建——有时候只是给按钮父容器加了个 opacity: 0.99，DevTools 里也看不出明显异常，但混合就彻底失效。动手前务必打开 computed styles，确认 isolation 状态为 isolate，且没有其他属性意外触发层叠上下文。
