mix-blend-mode生效需同时满足三前提：元素参与视觉重叠（须设position）、父容器未创建新层叠上下文（禁用opacity/filter/transform等隔离属性）、下方存在可混合内容（如兄弟或父背景）；否则无效。
mix-blend-mode 不是设置“元素和自身背景”的混合，而是让元素内容（比如文字、<img>）和它**正下方堆叠上下文里的东西**混合——比如父容器的纯色背景、兄弟 <div>、<video> 或 canvas。写对属性名只是第一步，90% 的“没效果”源于结构断裂。
mix-blend-mode 为什么加了没反应
不是浏览器不支持，是混合根本没发生。三个硬性前提缺一不可：
- 目标元素必须参与视觉重叠：不能是
display: inline（默认值），得设position: relative、absolute或inline-block - 父容器不能创建新层叠上下文：禁用
isolation: isolate、opacity: 0.99、filter: blur(1px)、transform: translateZ(0)等隐式隔离属性 - 下面得有东西可混：单独一个
<div class="text">加mix-blend-mode: overlay是无效的；它必须盖在有背景的兄弟或父容器上
正确结构：同级兄弟 + 定位覆盖
最稳、最易调试的写法是把背景和前景做成同一父容器下的**同级兄弟元素**，用定位控制覆盖关系：
.bg { background-image: url("hero.jpg"); height: 400px; }
.text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; mix-blend-mode: overlay; }
注意：.text 和 .bg 必须是兄弟，不能把 .text 塞进 .bg 里——除非你手动给 .bg 加 isolation: auto（但 Safari 不认这个值，慎用）。
立即学习“前端免费学习笔记（深入）”；
mix-blend-mode 和 background-blend-mode 别混用
这是逻辑翻车高发区：
-
background-blend-mode混的是**同一个元素的多个 background 图层**，例如：background-image: url(a.jpg), linear-gradient(to bottom, red, transparent); background-blend-mode: multiply; -
mix-blend-mode混的是**不同 DOM 元素之间**的像素，比如标题文字盖在 banner 图上、SVG 图形浮在照片上方 - 如果你给一个带
background-image的<div>直接设mix-blend-mode，结果一定是空白——因为背景图不算“内容”，不参与计算
常见 blend mode 值的实际行为差异
别死记公式，看颜色反应更准（假设底层是浅灰 #ccc，上层是亮红 #f00）：
-
multiply：变暗，“红 × 灰” → 暗红；适合叠加阴影或压白底图 -
screen：变亮，“1 − (1−红) × (1−灰)” → 浅粉；适合光晕、高光 -
overlay：自动切分 —— 底层暗就multiply，亮就screen；文字压图最常用 -
darken/lighten：只取 RGB 各通道最大/最小值，行为最可预测，适合做简单对比控制
真正容易被忽略的是：mix-blend-mode 是渲染管线中 layer compositing 阶段的行为，一旦层叠上下文在任意祖先中断，浏览器连混合计算都不会触发——它不会报错，也不会警告，只是安静地当没这回事。
