mix-blend-mode 无反应是因为缺乏可混合对象：元素需有真实内容（非空div）、背后需有非透明像素、且不能被transform等属性切断层叠上下文。
mix-blend-mode 为什么设了没反应？先看这三件事
不是浏览器不支持，而是它根本没“看到”可混合的对象。mix-blend-mode 只对「当前元素的内容」和「它背后的真实像素」起作用——背后要是空的、隔离的、或压根没重叠，就什么都不会发生。
常见失效现象：mix-blend-mode: multiply 加上后页面毫无变化；用 DevTools 检查发现元素渲染正常，但颜色完全没变；在 iOS 上动画中突然失效。
- 确保该元素有可渲染内容：文字、
<img>、<svg></svg>，或者带content的伪元素；纯空<div> + <code>background-color不算 - 背后必须有非透明底色：可以是父容器的
background-color、兄弟元素、body背景，但background-image本身不参与混合 - 避免中间层意外创建新层叠上下文：
transform、filter、opacity: 0.99、will-change都会切断，导致子元素只能跟“透明黑”混合 -
multiply：适合深色文字压浅图，或 logo 叠在白色背景上“去白留黑”，但纯白区域会完全透明，慎用于含白色细节的图层 -
screen：光效叠加（如霓虹、高光）很自然，但底图稍亮就会发灰，建议搭配opacity: 0.6–0.8控制强度 -
overlay：对比度提升最猛，标题压图时强化视觉焦点，但会放大噪点和低分辨率图的瑕疵 - 绝对不要在
@keyframes中动态修改mix-blend-mode值；改用固定模式 + 动态调background-color或opacity - 禁止给混合元素加
will-change: transform——它强制创建独立合成层，彻底断开混合链路 - 降级检测别只写
@supports (mix-blend-mode: difference)；iOS 7–8 会误报支持，更稳妥的是：@supports (mix-blend-mode: difference) and (not (-webkit-appearance: none))
mix-blend-mode: multiply / screen / overlay 实际效果差异在哪
别靠名字猜——它们是像素级公式计算的结果，不是调色盘选色。multiply 是 R × Rback，screen 是 1 − (1−R) × (1−Rback)，overlay 则按亮度分支处理：暗区用 multiply，亮区用 screen。
实操建议：
如何让 mix-blend-mode 在移动端稳定生效
iOS 14–15 是重灾区：动画中切换值会卡顿、will-change: transform 直接禁用混合、某些 GPU 配置下干脆不渲染。Android Chrome 好些，但千元机仍可能掉帧或闪烁。
关键规避点：
mix-blend-mode 和 background-blend-mode 别混用
这是命名带来的最大陷阱。两者语法值一样，但作用对象完全不同：
mix-blend-mode 处理的是「一个元素的内容」和「它背后所有堆叠上下文中的像素」之间的混合，比如文字压图、图标叠在渐变上；
background-blend-mode 只管「同一个元素的多个背景层之间」怎么混合，比如一张 background-image + 一个 linear-gradient。
典型错误：div 设了 background-image 和 mix-blend-mode: overlay，结果空白——因为背景图不算“内容”，不参与 mix-blend-mode 计算。
真要实现图+色混合，得拆成两个真实 DOM 元素：<img> 叠在 <div style="max-width:90%"> 上，并确保它们在同一个 stacking context 中。</div>
