mix-blend-mode: difference 失效主因是图层关系断裂：文字与背景须同父容器且无隐式 stacking context（如 opacity、filter、z-index）；需设 isolation: isolate 并确保背景直属于该容器。
mix-blend-mode: difference 能让文字“看起来”自动反色，但它不是真在检测背景，而是靠像素级差值运算强行出高对比——用对了省事，用错了连 Safari 都不给你面子。
为什么直接加 mix-blend-mode: difference 常常没反应
90% 的失效不是代码写错，而是图层关系断了：
- 文字和背景不在同一父容器内（比如背景设在
<body>，文字在<header>）→ 必须给文字容器加isolation: isolate - 父容器用了
opacity: 0.99、filter: blur(0)或transform→ 会隐式创建新 stacking context，切断混合链路 - 文字被包在多层
<div>里，其中某一级有position: relative+z-index→ 打断相邻图层关系 - 背景是
background-image但叠加了rgba(0,0,0,0.1)遮罩 →difference会跟整张图算差值，结果发灰、边缘噪点
编辑器中安全启用的 DOM 结构写法
HTML 编辑器（如 contenteditable 区域或富文本框架）通常嵌套深、样式不可控。要让 mix-blend-mode 生效，得把混合关系“锁死”在可控层级：
- 给编辑器容器设
position: relative和isolation: isolate（强制它成为混合锚点） - 背景必须由该容器的
background-color或background-image直接提供，不能靠子元素撑开 - 文字节点（如
<p>、<h2>）必须是它的**直接子元素**，不能隔一层 wrapper<div class="block"> - 禁用所有可能触发新层叠上下文的属性：删掉
opacity、filter、will-change，哪怕值是默认或 0
文字颜色和兼容性兜底策略
别指望灰色或主题色能稳定反色：
立即学习“前端免费学习笔记（深入）”；
- 只用
color: #000000或color: #ffffff—— 中间色（如#666）在#808080背景上输出仍是#7f7f7f，对比度崩盘 - 必须加
@supports (mix-blend-mode: difference)包裹，否则旧版 Safari（≤15.3）、IE、Android WebView 69 会回退成默认色，毫无提示 - 移动端 Safari 对
position: sticky或fixed元素的mix-blend-mode支持极差（iOS 15.4 前直接禁用），编辑器顶部工具栏慎用 - WCAG 不认这个效果：屏幕阅读器看不到“当前文字为白”，对比度也得手动测（推荐
contrast-ratioCLI 工具）
真正容易被忽略的是 stacking context 的隐式创建
哪怕只是给父容器加了个 opacity: 0.99，都可能让混合失效。动手前先打开 DevTools，检查 computed styles 里的 isolation 和 will-change 状态——不是看有没有写，而是看浏览器实际是否创建了新层。编辑器这类动态内容场景，比静态页面更容易踩中这个坑。
