HTML5本身不支持混合模式，mix-blend-mode和background-blend-mode均来自CSS规范；前者作用于元素与其下方堆叠上下文内容但受层叠上下文限制，后者仅混合元素自身多个背景且更稳定可控。
混合模式在 HTML5 中并不存在
HTML5 本身没有定义任何「混合模式」（blending modes）能力。你看到的 mix-blend-mode 或 background-blend-mode 实际来自 CSS，不是 HTML 标签或 HTML5 规范的一部分。浏览器支持依赖的是 CSS Compositing and Blending Level 1 标准，现代浏览器（Chrome 41+、Firefox 32+、Safari 8+、Edge 79+）才开始稳定支持。
mix-blend-mode 的实际使用条件
这个属性作用于元素自身与其**下方堆叠上下文中的内容**（包括父容器背景、兄弟元素、甚至 canvas 绘图），但有严格前提：
- 目标元素不能是 stacking context 的根（比如设置了
position: fixed、opacity 、will-change: transform等会创建新层叠上下文的属性，可能截断混合效果） - 混合只发生在绘制阶段，对
display: none或visibility: hidden元素无效 - SVG 元素也支持
mix-blend-mode，但需注意 SVG 渲染树与 HTML 堆叠上下文的交界处行为不一致 - 常见取值：
multiply、screen、overlay、darken、lighten、difference
.blend-text {
mix-blend-mode: multiply;
color: #ff6b6b;
}
background-blend-mode 更可控但仅限背景层
它只影响元素自身的多个 background-image 和 background-color 之间的混合，不涉及其他 DOM 元素，因此更可预测、调试友好：
- 必须设置至少两个背景源（例如一张图片 + 一个纯色背景）才能生效
- 不触发新的层叠上下文，也不受父级 stacking context 影响
- 性能开销远低于
mix-blend-mode，适合静态 banner 或卡片装饰 - 注意：渐变（
linear-gradient）算作一个background-image，可参与混合
.hero {
background-image: url(bg.jpg), linear-gradient(45deg, #ff9a9e, #fad0c4);
background-blend-mode: overlay;
background-color: #fff; /* fallback 背景色，参与混合 */
}移动端和 Safari 的兼容性陷阱
iOS Safari（尤其 iOS 15 及更早）对混合模式的支持存在隐藏限制：
立即学习“前端免费学习笔记（深入）”；
-
mix-blend-mode在position: sticky或transform: translateZ(0)元素上可能完全失效 - 使用
will-change: transform强制硬件加速反而会禁用混合（因创建了隔离的合成层） - Canvas 2D 上下文绘制的内容默认不参与 CSS 混合；如需混合，得用
globalCompositeOperation在 JS 层实现（例如ctx.globalCompositeOperation = 'multiply'） - 务必用
@supports (mix-blend-mode: multiply)做特性检测，而非仅靠 UA 判断
混合效果高度依赖渲染管线路径，同一段代码在桌面 Chrome 和 iOS Safari 上表现不同，不是 bug，而是底层合成策略差异——这点最容易被忽略。
