mix-blend-mode在重叠元素上不生效，因父容器触发隔离上下文（如isolation: isolate、transform等）阻断同层混合；multiply发灰因半透明预乘导致暗部丢失；iOS Safari支持但需GPU加速且禁用fixed元素；文字自动适配不可靠，应优先用背景混合或亮度检测。
mix-blend-mode在重叠元素上不生效？检查是否触发了隔离上下文
mix-blend-mode只对「同层混合」有效，一旦父容器设置了isolation: isolate、transform、opacity（小于1）、filter等属性，就会创建新的堆叠上下文，阻断子元素与背景或其他兄弟元素的混合。
- 常见误操作：给整个卡片容器加
transform: translateY(0)做硬件加速，结果mix-blend-mode: multiply突然失效 - 验证方法：临时移除父级所有可能创建新层叠上下文的样式，看混合是否恢复
- 安全做法：把需要混合的元素提一层，确保它们和背景（比如
<body>或一个纯色<div>）处于同一堆叠上下文
multiply变暗效果发灰、不自然？注意颜色空间和透明度叠加逻辑
mix-blend-mode: multiply本质是逐通道相乘（R×R, G×G, B×B），所以它对浅色区域压制强、对深色区域几乎无影响。但如果你看到结果偏灰，大概率是因为叠加了半透明色块——alpha通道会先与底色预乘，再参与混合，导致暗部细节被吃掉。
- 避免用
rgba(0, 0, 0, 0.3)直接覆盖图片：改用background: #000+opacity: 0.3（此时opacity不触发隔离，且混合发生在合成阶段） - 想精确控制变暗程度，优先试
background-blend-mode: multiply（用于单个元素的多背景叠加），比mix-blend-mode更可控 - 深色模式下慎用：
multiply在深底色上几乎不显效果，可搭配screen或overlay做条件切换
移动端iOS Safari不支持mix-blend-mode？实际支持但有渲染限制
iOS 13+ Safari已支持mix-blend-mode，但存在两个硬伤：一是GPU加速未完全启用时混合会闪烁或跳帧；二是当混合区域含视频、iframe或canvas时，部分机型直接禁用混合。
- 必须加
will-change: transform或transform: translateZ(0)强制开启GPU图层（仅对混合元素本身加，别乱加到父级） - 避免在
position: fixed元素上使用——iOS Safari对此类定位+混合的组合支持极差，常表现为白屏或错位 - 真机测试不可省：模拟器里一切正常，但iPhone SE2或iPad Air 4上仍可能fallback为普通叠加
想让文字和背景图自动变暗适配？mix-blend-mode不是万能解法
很多人想用mix-blend-mode: multiply让白色文字在任意背景图上“自动变暗可读”，这在技术上行不通：文字颜色不会动态反色，multiply只会把它变得更黑，遇到深图就彻底看不见。
立即学习“前端免费学习笔记（深入）”；
- 真正可靠的方案是CSS容器查询+
background-blend-mode配合渐变蒙版，或JS检测图片平均亮度后切换文字class - 如果坚持用混合，至少加一层
background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2))作为保底，防止文字消失 - 别忘了
mix-blend-mode不改变元素尺寸和布局流，但它会让z-index行为变得微妙——混合后的视觉层级≠DOM层级，调试时容易误判
mix-blend-mode的边界很清晰：它只负责像素合成，不介入布局、不感知语义、也不响应内容变化。用之前，先确认你真的需要的是“像素级混合”，而不是“视觉降噪”或“对比度调节”——后者往往该交给color-scheme、prefers-contrast或SVG滤镜。
