mix-blend-mode生效需满足兄弟元素、同层叠上下文、视觉重叠三要素；失效主因是父容器触发新层叠上下文（如transform/filter/isolation/opacity），或元素非兄弟关系、未正确定位。
mix-blend-mode 要生效，不是加了属性就能看到效果——它几乎必然因父容器触发新层叠上下文（stacking context）而静默失效。
为什么 mix-blend-mode 加了却没反应
常见错误现象：两张 <img> 叠在一起，mix-blend-mode: multiply 在开发者工具里显示为“已启用”，但视觉上仍是普通透明叠加，毫无正片叠底痕迹。
- 父容器写了
transform: translateZ(0)、filter: blur(1px)或opacity: 0.99→ 隐式创建隔离上下文，直接掐断混合 - 父容器显式设置了
isolation: isolate→ 混合被主动禁用 - 两张图不是兄弟元素：比如一张在
<div class="a"><img></div>里，另一张在外部<img>→ 不跨层级混合 - 用了
position: relative+z-index“假装重叠”，但实际渲染位置没交叠 → 混合不触发
怎么快速验证是否是 stacking context 导致的
不用逐层排查，用最粗暴但最有效的方式定位：
- 把两张
<img>直接挪到下作为子元素（移除所有中间包裹） - 给它们都加
position: absolute和相同top/left，确保视觉重叠 - 只保留
mix-blend-mode，其他样式清空 - 如果这时混合生效 → 100% 是中间某层触发了新 stacking context
再一层层往上注释父容器的 CSS，重点盯 transform、filter、isolation、opacity、will-change 这几个高危属性。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
mix-blend-mode 和 background-blend-mode 别混用
这是两个完全不同的合成路径，目标对象和约束条件都不重合：
-
background-blend-mode作用于单个元素的多个背景层（比如background-image: url(a.jpg), linear-gradient(red, transparent)），不依赖 DOM 结构，也不怕 stacking context，兼容性更稳 -
mix-blend-mode是元素级混合，能混合<img>、<div>、<code><p></p>等任意可渲染内容，但必须满足兄弟 + 同 context + 视觉重叠三要素 - 想混合两张独立图片？选
mix-blend-mode，但得亲手管好层叠环境；想用一张图+渐变做调色？直接用background-blend-mode更省心 -
hard-light、color-dodge、color-burn、exclusion→ 渲染可能退回到normal -
hue、saturation、color、luminosity→ 在某些版本中表现为色相偏移异常或完全无反应 - 实测建议：用
multiply、screen、overlay、soft-light这四个最通用的值保底，复杂需求改用 Canvas 的globalCompositeOperation
Safari 对部分混合模式支持不全
别只在 Chrome 里测完就上线。Safari（尤其是 iOS 16 及更早）对以下值支持不稳定或缺失：
真正难的从来不是写那行 mix-blend-mode，而是你得像调试 z-index 一样去推演整个层叠树——稍有不慎，整条混合链就断在看不见的地方。
