mix-blend-mode 在 h5 中失效主因是层叠上下文截断及 ios safari 兼容性差；推荐改用 background-blend-mode 并配合语义化 html 结构与 js 环境检测降级。
mix-blend-mode 在 H5 页面中为何失效
常见现象是写了 mix-blend-mode: multiply 却没效果，页面看起来和没写一样。根本原因不是代码写错，而是它被层叠上下文（stacking context）截断了——只要父元素设置了 opacity、transform、will-change 或 position: fixed，就可能让混合“失联”。
- 真机调试时 iOS Safari（尤其 iOS 15 及更早）对
mix-blend-mode支持极不稳定，position: sticky或transform: translateZ(0)会直接禁用混合 -
display: none或visibility: hidden的元素不参与混合，哪怕只是临时隐藏也不行 - Canvas 绘制内容默认不参与 CSS 混合；如需叠加，得把 canvas 包在普通 DOM 元素里，并确保它没触发新层叠上下文
- SVG 内嵌时行为不一致：SVG 渲染树与 HTML 堆叠上下文交界处容易漏混合，优先用
background-blend-mode替代
background-blend-mode 是更稳的替代方案
如果你只是想让一张背景图和渐变色叠加出柔和过渡效果，background-blend-mode 几乎不会翻车。它只作用于元素自身的多个背景层，不依赖外部堆叠关系，也不受父级 z-index 或 opacity 影响。
- 必须设置至少两个背景源才生效，例如：
background-image: url(bg.jpg), linear-gradient(45deg, #ff9a9e, #fad0c4) -
background-color也算一个背景层，可参与混合，但不能单独存在——没有background-image时，background-blend-mode无效 - 取值推荐
overlay或soft-light，比multiply更易控明暗，且在低端安卓 WebView 中兼容性更好 - 性能开销显著低于
mix-blend-mode，适合静态 banner、活动页头图等对帧率敏感的场景
H5 页面结构需配合语义化重写
混合模式不是加个 CSS 就完事的。当页面用一堆 div 堆出视觉区块，再强行套混合，结果往往是局部生效、全局错位。真正适配混合逻辑的 HTML，得从结构上支持“分层叠加”这个意图。
- 用
section划分内容主题块，每个块内部用figure+figcaption包裹图文组合，便于独立设置混合范围 - 避免把混合元素塞进
nav或header这类有隐式层叠上下文的语义容器里；如需混合导航背景，改用aside或普通div并手动控制z-index -
main必须全页唯一，且不能嵌套在其他语义块内；混合区域若属于核心内容，应直接放在main下，而非包裹在额外div中 - 时间、作者等元信息用
time和cite标记，它们本身不参与混合，但能提升机器可读性——这对混合页面的 SEO 和无障碍访问很关键
客户端内嵌 H5 的资源校验与降级兜底
小程序或 App 容器里加载的 H5 页面，一旦混合样式因环境限制失效，用户看到的就是突兀的纯色块或断裂图层。这时候光靠 CSS fallback 不够，得在 HTML 层做主动判断。
- 在
中插入轻量 JS 检测：if (CSS.supports('background-blend-mode', 'overlay')) { document.documentElement.classList.add('blend-ready'); } - 对应 CSS 中用
.blend-ready .hero开启混合，未通过检测时自动回退到单背景 + 阴影模拟 - 静态资源（尤其是带混合效果的图片）建议加哈希后缀，配合客户端资源校验机制，防止被中间人篡改后导致混合错位
- 不要依赖
@supports做全部判断——iOS Safari 对它的实现有延迟，首次渲染仍可能闪白，需配合requestAnimationFrame延迟应用混合类
rem 适配还难排查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
