background-blend-mode仅对同一元素内逗号分隔的多背景层生效，如background: url(img.jpg), linear-gradient();mix-blend-mode则作用于元素整体与背后内容的混合，需确保同层叠上下文且无opacity/transform干扰。
大图背景加混合模式不是简单套个 mix-blend-mode 就能出效果，关键得看你是想“混图层内部”还是“混图层之间”——选错方向，写一百遍 CSS 都没反应。
background-blend-mode：同一元素多背景叠加才生效
它只管一个 <div> 自己身上的多个背景怎么叠，比如一张图 + 一个渐变。单写 background-image: url(hero.jpg)，再加 background-blend-mode: multiply，浏览器直接无视。
- 必须用逗号分隔至少两个背景：
background: url(hero.jpg), linear-gradient(135deg, #0004, #0000); -
background-color要写进同一个声明里（如上面例子末尾的#0000），否则只是 fallback，不参与混合 - 图层顺序 = 渲染上下顺序：前面的是底层，后面的是上层；
multiply对浅色上层更敏感，深色底图容易被吃掉细节 - Safari 15.3 及更早版本不支持，
@supports (background-blend-mode: multiply)得包一层降级逻辑
mix-blend-mode：让 img 或文字和下方内容混合
它不管你的大图是不是背景，只认 DOM 元素之间的堆叠关系。给一个 <div> 设了 background-image，再给里面 <p> 加 mix-blend-mode: screen，只要结构对、上下文没断，文字就能和底图“化学反应”。
- 确保父容器没触发新层叠上下文：删掉
transform、opacity: 0.99、filter、isolation: isolate - 文字或图片必须视觉重叠且在同一个 stacking context 里；别把
<img>塞进带transform的容器里 - 深色背景配
screen显高光，浅色背景配multiply压暗边缘；纯白背景下multiply几乎无感 - 移动端 Safari 对
mix-blend-mode在position: sticky或will-change: transform元素上会静默禁用
Canvas 动态覆盖层：需要交互或动画时的替代方案
静态混合模式扛不住频繁变化的场景，比如鼠标划过区域高亮、粒子轨迹、遮罩动画——这时候 Canvas 是更可控的选择。
立即学习“前端免费学习笔记（深入）”；
- Canvas 必须设
pointer-events: none，否则挡住下方点击 - 背景保持
transparent，别用fillStyle盖死底层 - 用
globalAlpha: 0.3控制整体通透度，比反复调opacity安全（后者会中断混合链） - 绘制时优先用
lineCap: 'round'和shadowBlur做软边，硬边容易破坏高级感
真正难的不是写哪一行 CSS，而是判断当前效果该走哪条链路：是图层内混合、元素间混合，还是干脆交给 Canvas 动态合成——选错路径，所有调试都只是在掩盖结构性问题。
