mix-blend-mode 是元素内容与下方堆叠上下文（如父背景、兄弟元素、video等）的混合，生效关键在于结构：需同级定位+下方有可混合内容，且避免 isolation、opacity、filter 等隐式创建层叠上下文的属性。
mix-blend-mode 不是“设置元素与自身背景的混合”，而是让元素内容（文字、图片等）和它**下方堆叠上下文里的东西**混合——比如父容器背景、兄弟元素、甚至 canvas 或 video。想让它生效，结构比写对属性名重要得多。
mix-blend-mode 为什么加了没反应
90% 的“没效果”不是浏览器不支持，而是混合根本没发生。关键卡点有三个：
- 目标元素没参与视觉重叠：默认
display: inline不参与层叠，必须设position: relative、absolute或inline-block - 父容器悄悄隔离了层叠上下文：比如写了
isolation: isolate、opacity: 0.99、filter: blur(1px)、transform: translateZ(0)，都会中断混合链 - 下面压根没东西可混：单独给一个
<div class="text"> 加 <code>mix-blend-mode: overlay是无效的；它得盖在有背景的兄弟或父容器上正确结构：同级定位 + 父背景 or 兄弟背景
最稳的写法是把要混合的元素和背景做成同级兄弟，并用定位控制覆盖关系：
.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 不认这个值，慎用）。如果非要用父子结构，确保父容器有背景且没加任何隐式隔离属性：
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 可行：
<div style="background: #222"><p style="mix-blend-mode: screen; position: relative">Hello</p></div> - ❌ 失效：
<div style="background: #222; opacity: 0.99"><p style="mix-blend-mode: screen">Hello</p></div>（opacity创建新层叠上下文）
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 图形浮在照片上方
想让白色文字在深色图上自动变亮？别硬套
mix-blend-mode: screen，先确认它真正在图的上方、且图不是它的子元素背景——否则你该用background-blend-mode配合伪元素做遮罩更可靠。iOS Safari 和 sticky 定位的兼容性坑
即使结构完全正确，在 iOS Safari（尤其是 iOS 15 及更早）上仍可能静默失效：
-
position: sticky上的mix-blend-mode基本不工作，换成position: relative或absolute - 任何带
will-change: transform或transform: translateZ(0)的祖先元素，大概率让混合被忽略（强制合成层隔离） - video 或 canvas 作为混合底层时，Safari 支持不稳定，Chrome/Firefox/Edge 104+ 更靠谱
真正难调的从来不是选哪个 blend mode 值，而是让浏览器承认“这两个元素确实在叠着，而且允许它们像素打架”。结构一错，后面全白搭。
- ✅ 可行：
