Tailwind 默认不支持 mix-blend-mode 类，需通过 @layer utilities 手动注入；bg-black/50 无法参与混合，因 background-color 不构成可混合的背景层；全屏视频+遮罩+文字必须严格分三层：视频层、多背景层遮罩（如渐变）、独立文字层，并确保 stacking context、z-index 和 isolation 设置正确。
直接说结论：Tailwind 默认不支持 mix-blend-mode 类，也不能靠 bg-black/50 这类遮罩类“叠加”出混合效果；全屏背景视频 + 遮罩 + 混合文字，必须分三层控制：视频层、遮罩层（用 background-blend-mode 或伪元素）、内容层（用 mix-blend-mode），且每一层的 stacking context 和背景层级都得手动理清。
为什么 bg-black/50 + mix-multiply 不起作用
常见错误是给文字加 mix-multiply，同时给父容器加 bg-black/50，结果文字颜色毫无变化。这是因为：
-
bg-black/50编译为background-color: rgba(0,0,0,0.5)，属于单层background-color，不是可参与background-blend-mode的「背景层」 -
mix-blend-mode混合的是「当前元素内容」和「它背后所有堆叠上下文中的内容」，但若遮罩是父元素的background-color，它和文字在同一个 stacking context 里，浏览器不会把它当“背景”去混合 - 视频本身是
<video></video>元素，不是 CSS 背景，mix-blend-mode对它生效的前提是：文字元素必须「视觉上位于视频上方，且视频未被其他不透明层遮挡」
正确分层结构：视频 → 遮罩层 → 文字
必须用三个独立 DOM 层（或两个 DOM + 一个伪元素）来隔离职责：
- 最底层：
<video class="absolute inset-0 w-full h-full object-cover"></video>，设autoplay muted loop - 中间层：一个
div或伪元素（如::before），设absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent—— 注意这里用了渐变，构成 ≥2 个背景层，才能启用background-blend-mode - 顶层：文字容器，设
relative z-10 mix-overlay（需先用@layer utilities注入）
关键点：中间遮罩层不能用纯色 bg-black/50，必须用 bg-gradient 或 bg-[url(...)] 显式创建多背景层，否则 background-blend-mode 无意义；而文字层必须用 mix-blend-mode，且确保其父容器没设 isolation: isolate（否则会切断混合链）。
如何安全注入 mix-blend-mode 类
别用插件，也别在组件里 @apply mix-multiply，直接在 src/styles.css 的 @tailwind utilities 前加：
@layer utilities {
.mix-normal { mix-blend-mode: normal; }
.mix-multiply { mix-blend-mode: multiply; }
.mix-screen { mix-blend-mode: screen; }
.mix-overlay { mix-blend-mode: overlay; }
.mix-difference { mix-blend-mode: difference; }
}
这样既支持响应式（如 md:mix-screen），又避免命名污染。注意：mix-blend-mode 会强制创建新的 stacking context，所以如果文字被后面元素盖住，不是样式写错了，而是 z-index 没跟上——必须显式设 z-10 或更高，并确认兄弟元素没用 isolation: isolate。
容易被忽略的兼容性与性能陷阱
mix-blend-mode 在 Safari 15.4+ 才稳定支持 difference 和 exclusion；iOS WebView 仍存在闪烁问题。更实际的风险是：
- 视频 + 遮罩 + 混合文字三者叠加后，GPU 渲染压力陡增，低端 Android 设备可能出现掉帧
-
mix-blend-mode与transform: scale()或filter: blur()同时使用时，部分 Chrome 版本会触发渲染异常（文字消失或错位） - 如果视频源是跨域的（比如从 CDN 加载），且服务端没配
Cross-Origin-Resource-Policy: cross-origin，mix-blend-mode可能被浏览器静默禁用
真正难调的从来不是怎么写，而是哪一层悄悄打断了混合链——检查 isolation、will-change、transform 和父级 overflow: hidden，比翻文档还管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
