mix-blend-mode能让重叠的实现photoshop式混合，但必须同时满足四个条件：元素为普通流内标签、视觉重叠、同属一个层叠上下文、且为兄弟元素；失效主因是父容器触发新层叠上下文。
HTML 本身没有“图片叠加模式”这个概念，所有所谓“叠加模式”都来自 CSS 渲染层，核心是 mix-blend-mode 或 background-blend-mode ——但它们生效条件极严，设了不等于看到效果。
mix-blend-mode 失效的四个硬性条件
想让两张 <img> 按 multiply、screen 等方式混合，必须同时满足：
-
<img>是普通流内元素（不能是background-image） - 两张图在视觉上真正重叠（比如都
position: absolute且top: 0; left: 0;） - 它们属于同一个 stacking context：父容器不能有
transform、filter、isolation: isolate、opacity - 必须是兄弟元素（不能一个在
<div> 里，另一个在外部；也不能一个是子元素，一个是父元素） <p>常见失效现象：<code>mix-blend-mode: multiply写对了，开发者工具里也显示生效，但页面完全没变化——八成是中间某层触发了新 stacking context。最简单验证法：把两张<img>直接扔进下试一下，如果这时能混合，问题就出在 DOM 结构或父容器样式上。background-blend-mode 更稳，但只管背景图
如果你的目标是让一张图和它的底纹/渐变/另一张背景图融合，用
background-blend-mode更可靠：- 它作用于单个元素的多个
background-image层，不依赖 stacking context，兼容性好 - 写法示例：
background-image: url(a.jpg), linear-gradient(45deg, #ff0, #00f); background-blend-mode: overlay; - 注意：
background-blend-mode和mix-blend-mode完全不兼容——前者管“一个盒子内部的多层背景”，后者管“多个盒子之间的像素混合” - 无法用于两个独立
<img>标签，别试图给<div> 同时设 <code>background-image和mix-blend-mode去“混合自己”position + opacity 是最通用的“伪叠加”方案
绝大多数所谓“图片叠加”其实只是视觉层叠+透明度控制，而非真像素混合：
- 父容器设
position: relative，两张<img>都设position: absolute; top: 0; left: 0;，再用z-index控制前后 - 上层图加
opacity: 0.7就能实现半透融合，比mix-blend-mode兼容性高得多 - 避免用
opacity 去“调试” <code>mix-blend-mode——它会直接创建新 stacking context，让混合彻底失效 - 响应式场景下，优先用
transform: translate()微调位置，比死磕top/left更安全
真正容易被忽略的一点
mix-blend-mode不是 CSS 滤镜，也不是图像处理 API；它是浏览器合成阶段的行为，一旦 stacking context 断开，渲染引擎连尝试混合的机会都没有。很多开发者反复改mix-blend-mode的值却看不到变化，其实是卡在了 DOM 结构或父容器样式这一关——与其调参数，不如先打开开发者工具的 Layers 面板，确认两张图是否真的在同一个合成层里。 - 父容器设
- 它作用于单个元素的多个
