isolation: isolate 不禁用 mix-blend-mode，而是创建新层叠上下文，使混合仅限于容器内部子元素间，不再与 body、导航栏等外部背景混合；它必须加在满足 position 且非 inline 的父容器上才生效。
isolation: isolate 不是混合模式的开关，而是层叠上下文的“划界指令”——它让 mix-blend-mode 只在容器内部生效，不和 body、导航栏、侧边栏背景混合；但加了它，mix-blend-mode 看似“失效”，其实是按规范在工作。
为什么 mix-blend-mode 加了 isolation: isolate 就不和外部混合了
默认情况下，mix-blend-mode 会穿透整个层叠上下文：一个蓝色文字设了 multiply，不仅和正下方的图片混合，还会继续向下和父容器背景、body 背景一起算。这就是“背景污染”。isolation: isolate 的作用不是禁用混合，而是**把容器变成混合计算的终点**——它内部的元素只彼此混合，不再向外延伸。
常见现象：
- 原本文字压在图片上变暗，加了
isolation: isolate后颜色恢复正常（没和图片混了） - DevTools 里
mix-blend-mode值仍是multiply，但视觉毫无变化 - 两个重叠 div 混出新色，隔离后像没加一样
给谁加 isolation: isolate 才有效
必须加在**参与混合的元素的最近块级父容器**上，且该容器要满足三个硬性条件：
立即学习“前端免费学习笔记（深入）”；
- 不能是
display: inline或inline-block元素（会被浏览器静默忽略） - 必须有
position: relative、absolute、fixed或sticky（否则不创建上下文） - 不能被更外层已存在的层叠上下文包裹（比如外层父元素用了
opacity: 0.99或transform）
错误做法：<span class="highlight">foo</span> 上直接加 isolation: isolate —— 无效，因为 span 默认是 inline。
实际写法与 Safari 兼容细节
标准写法需带前缀支持旧版 Safari（Safari 14 及更早不支持无前缀版本）：
.blend-container {
position: relative;
-webkit-isolation: isolate;
isolation: isolate;
}
注意：
-
isolation: auto是默认值，不创建新上下文；没有isolation: on或isolation: true - 不需要为混合目的额外加
z-index，但若该容器本身需浮在其他模块上，就得补z-index - Chrome DevTools 的 «Layers» 面板可确认是否真成了上下文根节点（右键元素 → “Show layers”）
和 opacity/transform 触发上下文的本质区别
三者都创建新层叠上下文，但副作用天差地别：
-
opacity: 0.99：改透明度、影响可访问性、子元素继承异常 -
transform: translateZ(0)：可能引发字体渲染模糊、滚动卡顿、Safari 中will-change行为错乱 -
isolation: isolate：零视觉变化、零性能抖动、语义清晰
真正容易被忽略的是结构层级——isolation: isolate 只对它直接包裹的子树起作用，如果混合目标和背景不在同一容器内，再怎么隔离也救不了。
