mix-blend-mode未生效主因是缺失isolation: isolate或元素被提层脱离混合上下文；background-blend-mode作用于元素自身多层背景，mix-blend-mode作用于元素整体与背后内容混合；opacity会创建层叠上下文导致混合失效且性能下降。
mix-blend-mode 为什么没生效？
常见现象是写了 mix-blend-mode: multiply 却完全看不到混合效果，页面看起来和没写一样。根本原因通常只有两个：父容器设置了 isolation: isolate 缺失，或元素被“提层”导致脱离了共同混合上下文。
混合模式只在**同层且共享混合上下文**的元素间起作用。一旦某个祖先节点触发了层叠上下文（比如有 opacity、transform、filter 或 will-change），它就会把子元素隔开——子元素只能跟该层的内容混合，而不是跟背景或其他兄弟元素混合。
- 确保混合目标元素的最近非透明祖先没有意外创建层叠上下文
- 如果必须隔离，就在该祖先上显式加
isolation: isolate，强制它参与外层混合 - 浏览器 DevTools 中检查“Computed”面板里的
mix-blend-mode是否为normal（被重置）或invalid（值不合法）
background-blend-mode 和 mix-blend-mode 的区别在哪？
名字像，但作用对象完全不同：background-blend-mode 只管一个元素自身的多层背景图/色之间的混合；mix-blend-mode 是让整个元素（含内容、边框、阴影）跟它背后的**其他元素或 canvas 内容**混合。
比如给一个带渐变背景 + 图片背景的 div 设 background-blend-mode: overlay，是让这两层背景互相叠；而设 mix-blend-mode: screen，是让这个 div 整体（包括文字、子元素）跟它下面那个 div 或 body 背景混合。
立即学习“前端免费学习笔记（深入）”；
-
background-blend-mode支持所有 CSS 背景层（background-image、background-color），值可为normal/multiply/screen等 -
mix-blend-mode不影响自身背景内部混合，只影响渲染时的“像素级合成阶段” - 两者可共存，但注意叠加顺序：先算
background-blend-mode，再把整个元素按mix-blend-mode去跟下层混合
透明度（opacity）和 mix-blend-mode 同时用会出什么问题？
直接后果是混合失效或结果异常：因为 opacity 会强制创建层叠上下文，把元素“拎”进新层，导致它无法跟原本预期的底层内容混合，反而只跟自己的父容器背景混合——甚至可能变成全黑或全白。
更隐蔽的问题是性能：opacity + mix-blend-mode 组合会让浏览器放弃硬件加速路径，回退到 CPU 合成，滚动/动画明显卡顿。
- 优先用
rgba()或hsla()控制颜色透明度，而非opacity - 若必须用
opacity，确认它是否真需要作用于整个元素；有时只需对子元素设透明，就能避开提层 - Chrome DevTools 的 “Rendering” 面板打开 “Layer borders”，能直观看到哪些元素被意外分层
SVG 中的 mix-blend-mode 行为为什么和 HTML 不一样？
SVG 元素默认不参与 CSS 混合，除非显式设置 isolation: isolate 或把 SVG 嵌入方式换成 <img> 外链（此时它作为位图参与混合）。另外，SVG 内部的 <g> 或 <path> 即使设了 mix-blend-mode，也只跟 SVG 画布内其他图形混合，不会穿透到 HTML 层。
一个典型陷阱：用 <svg> 标签内联一段图标，然后想让它跟背后文字混合——结果发现完全没反应，因为 SVG 容器本身没被当作“混合参与者”。
- 给 SVG 根元素加
style="isolation: isolate"，让它加入外层混合上下文 - 避免在 SVG 内部用
opacity或filter，否则内部又会二次分层 - 如果混合对象是 SVG 和 HTML 文字，建议把文字也包进同一个
isolation: isolate容器里，确保它们处于同一合成层
transform: translateZ(0) 就能让整棵子树脱离混合，而且没有任何警告。调的时候别只盯样式表，得看实际渲染层结构。 
