mix-blend-mode 不作用于 background-color 或 background-image，只混合元素内容与其背后堆叠上下文；需用 background-blend-mode 处理多层背景叠加，且须在同一 background 声明中定义至少两层。
mix-blend-mode 不能处理盒模型的背景叠加 —— 它不作用于 background-color 或 background-image，只作用于元素内容（如文字、子元素、边框）与它下方的堆叠上下文内容之间的混合。
mix-blend-mode 的作用对象不是 background
很多人误以为给一个 .box 设置 mix-blend-mode: overlay 就能让它的 background-color 和父容器背景“叠”起来，但实际不会生效。因为：mix-blend-mode 只影响该元素自身的「绘制输出」与其「背后已渲染的内容」之间的像素运算，而它的 background 是它自己的一部分，属于“上方”，不是“背后”。
常见错误现象：
- 元素设置了
background-color: rgba(0,0,0,0.5)+mix-blend-mode: multiply，但颜色毫无变化 - 父容器有渐变背景，子元素设了
mix-blend-mode却没反应 —— 很可能子元素自带不透明background，把自己和背后隔开了
想让盒模型背景参与混合，得用 background-blend-mode
真正用于多层背景之间叠加的，是 background-blend-mode。它专为 background 层设计，且必须满足两个硬性条件：
- 元素的
background属性中至少声明两层（逗号分隔），例如：background: linear-gradient(...), url(...)或background: #fff, radial-gradient(...) - 所有层必须来自同一
background声明 —— 分开写background-color和background-image可能被浏览器合并或忽略其中一层
示例（安全可用）：
.blend-box {
background: linear-gradient(135deg, #4a00e0, #8e2de2),
url("pattern.png");
background-blend-mode: multiply;
}
注意：background-blend-mode 不会把文字或子元素卷进来，只管自己身上的背景图、渐变、纯色层之间怎么混。
mix-blend-mode 真正生效的典型结构
要让 mix-blend-mode 起作用，必须构造出「前景内容」与「背后背景」的明确分层关系：
- 父容器必须有可见背景（颜色、渐变或图片），且不能被中间层隔离
- 目标元素不能有遮挡性背景（即
background-color或background-image必须是 transparent 或未设置） - 目标元素需处于默认文档流，或通过
position: relative/isolation: isolate显式参与/限制混合范围 - 避免父级触发新层叠上下文：如
transform、filter、opacity 都会让子元素“blend 不下去”
正确结构示意：
.container { background: linear-gradient(#ff6b6b, #4ecdc4); }
.text { color: white; mix-blend-mode: screen; } /* .text 是 .container 的子元素，无 background */
移动端和性能必须提前踩的坑
mix-blend-mode 在滚动或动画中极易引发全区域重绘，尤其在 iOS Safari 和中低端安卓机上表现明显：
-
difference和exclusion在 iOS 16.4 之前不支持，且对灰阶敏感，纯黑区域会变灰，不是叠加而是抵消 - 绝对定位元素 +
mix-blend-mode+ 滚动 = 卡顿高发区，比transform慢一个数量级 - 不要在
will-change: transform元素上同时启用mix-blend-mode，GPU 加速反而失效 - 调试时别依赖 DevTools 实时预览 —— 它不渲染 blend 效果，靠截图对比或临时移除兄弟元素排查更可靠
最稳的混合模式就三个：multiply（加深）、screen（提亮）、overlay（自动适配明暗），其他值在生产环境慎用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
