Tailwind默认不提供mix-blend-mode类，且必须手动注入含isolation: isolate的自定义工具类；混合生效前提为元素内容与其背后真实渲染像素共存于同一层叠上下文，否则无效。
直接写 mix-blend-multiply 这类类名，90% 情况下不会生效——Tailwind 默认不提供 mix-blend-mode 工具类，且混合行为严重依赖层叠上下文和 DOM 结构，不是加个 class 就能出效果。
为什么 mix-blend-multiply 加了没反应？
根本原因不是语法错，而是浏览器压根没触发混合：它需要「当前元素的内容」和「它背后真实渲染的像素」同时存在，且二者不能被隔离断开。
- 给
<img>直接加mix-blend-multiply→ 无效，因为图片下方常是纯白背景或空父容器，没有可混合内容 - 父容器设了
isolation: isolate或用了transform/opacity: 0.99→ 混合链被切断，子元素无法和更下层内容混合 - 文字和遮罩都在同一父容器里，用
bg-black/50当“底” →background-color不构成可参与mix-blend-mode的底层内容 - 目标元素被
z-index升到新 stacking context，但视频或背景图在另一个 context → 它们物理上不在同一混合平面
怎么安全注入 mix-blend-mode 类？
不能靠 @apply 在组件里硬塞，也不能指望 mix-blend-multiply 自动可用。必须手动注入，并控制作用域。
- 在
src/styles.css中，@tailwind utilities前插入：@layer utilities { .mix-multiply { mix-blend-mode: multiply; isolation: isolate; } .mix-screen { mix-blend-mode: screen; isolation: isolate; } .mix-overlay { mix-blend-mode: overlay; isolation: isolate; } } - 避免定义响应式变体（如
md:mix-multiply），否则 JIT 会生成大量冗余 CSS - 别用
@apply mix-multiply在@layer components里，它会破坏工具类的原子性，且无法继承响应式逻辑
哪些场景必须分三层 DOM？
全屏视频 + 遮罩 + 文字叠加是最典型翻车现场，两层 DOM 必然失效。
立即学习“前端免费学习笔记（深入）”；
- 最底层：
<video class="absolute inset-0 w-full h-full object-cover">，确保未被其他元素遮挡 - 中间层：一个独立
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent">，注意这里用的是渐变而非bg-black/50，才能构成多背景层供background-blend-mode使用（若需） - 顶层：文字容器设
relative z-10 mix-multiply，且其**直接父容器不能有isolation: isolate**，否则混合链终止于父级 - 关键细节：中间遮罩层若用伪元素实现（如
::before），需确保其content: ""且显式设position: absolute，否则不参与渲染流
mix-blend-mode 和 background-blend-mode 到底怎么选？
区别不在“哪个更酷”，而在「作用对象」和「前提条件」完全不同。
-
background-blend-mode只管一个元素内部的多个background-image层，比如bg-[url(a.png),linear-gradient(red,blue)]+bg-blend-multiply；它对<img>、文字、兄弟元素完全无感 -
mix-blend-mode管的是元素自身与「它下方所有已绘制内容」的关系，所以它适合文字压图、图标透底、SVG 与背景融合等跨元素场景 - 常见误用：想调一张图的色调，却给
<img>加mix-blend-mode→ 应该用background-image+background-blend-mode，或改用伪元素盖色层 - 性能提醒：两者都触发额外合成层，
mix-blend-mode尤其敏感——滚动区域、轮播标题、高频 hover 动画中慎用
最容易被忽略的一点：混合是否生效，和你写的类名关系不大，而取决于「浏览器是否真把两层内容放在同一个合成层里绘制」。打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，看目标区域有没有重叠绘制的闪烁，没有就说明混合根本没启动。
