mix-blend-mode仅作用于元素内容与其背后内容（backdrop）的叠层混合，不混合盒模型内部的背景色、边框色或文字色；生效需满足：背后有真实内容（如父容器背景）、同一层叠上下文、前景元素无遮挡性背景。
mix-blend-mode 不能直接让盒模型的“背景色”和“边框色”或“文字色”之间混合——它只作用于**元素与其背后内容（backdrop）之间的叠层关系**。想看到混合效果，必须有“前景元素”和“它后面的东西”真实重叠。
mix-blend-mode 生效的前提：背后得有东西可混
很多人写了 mix-blend-mode: multiply 却没反应，根本原因是：元素后面空空如也。
- 父容器没设
background-color或background-image→ 混合对象是透明的 body，默认白色或用户代理样式，不可靠 - 元素是文档流最顶层，下面没有兄弟元素、没有父级背景、也没有定位重叠的其他块 → “背后”等于无
- 父级加了
isolation: isolate，或子元素自身触发了层叠上下文（比如opacity: 0.99、transform: translateZ(0)）→ 隔断了混合通路
常见能混成功的结构组合
真正跑通的最小可行结构，通常长这样：
.container {
background: linear-gradient(135deg, #4a00e0, #8e2de2);
}
.blended {
color: white;
mix-blend-mode: overlay;
/* 不要设 background-color！否则会盖住背后渐变 */
}
-
.blended必须是.container的子元素，且不脱离文档流（避免position: absolute后悬空） -
.blended自身不能有遮挡性背景（background-color或background-image），否则它就变成“背景”，不再是“前景” - 如果要用块级背景参与混合，得用伪元素：
::before设背景 +mix-blend-mode，宿主元素留空或仅放文字
选错混合模式会让内容消失
不是所有值都安全，尤其在浅/深背景切换时：
-
darken在白底上会让黑色文字直接隐形（取 min，白=1，黑=0 → 结果=0，但被白底盖住） -
color-burn遇到浅色背景容易过曝成灰白噪点；lighten在深色背景上会让文字“融化” -
difference和exclusion对灰阶敏感，纯黑区域会变灰，不是叠加而是抵消 - 日常最稳的是：
multiply（加深）、screen（提亮）、overlay（自动适配明暗）
移动端和性能陷阱必须提前踩
这个属性看着轻量，实则代价不小：
- iOS Safari 16.4 之前不支持
plus-lighter；hard-light在部分 iPad 上渲染偏色 - 只要任一参与混合的元素位置/尺寸/透明度变化，整个混合区域都会强制重绘——比
transform慢一个数量级 - 滚动中用
mix-blend-mode做视差文字？中低端安卓机大概率掉帧 - 动画里别跟
will-change: transform或filter同时用，GPU 加速反而失效
真要动效，优先考虑 background-blend-mode（仅限多层背景之间），它不牵连内容层，浏览器优化更成熟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
