background-blend-mode支持normal至luminosity共16种混合模式，仅作用于同一元素的多个背景图或背景色，需同origin/clip且写于单条background-image声明中。
background-blend-mode 支持哪些混合模式
它和 Photoshop 的图层混合逻辑基本一致，但只支持一部分常用值。浏览器实际能用的有：normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。
注意：color 和 luminosity 在 Safari 16.4+ 才稳定支持，旧版 Safari 会直接忽略整条声明；exclusion 在 Firefox 中渲染结果和 Chrome 不一致，慎用。
常见误判是以为它能像 mix-blend-mode 那样作用于任意元素——其实 background-blend-mode 只对同一个元素的多个背景图（或背景色）生效，且必须是纯 background 层叠，不涉及子元素或伪元素。
怎么让多张背景图正确参与混合
必须把所有要混合的图像都写进同一个 background-image 声明里，用逗号分隔。顺序很重要：越靠前的图层在越上层，混合计算从上到下进行。
立即学习“前端免费学习笔记（深入）”；
-
background-image: url(a.jpg), url(b.jpg), linear-gradient(to right, red, blue);—— a.jpg 是顶层，最先参与混合 - 不能拆成多个
background-image声明，否则只有最后一条生效 - 如果混入了
background-color，它会被当作最底层（隐式第 N+1 层），也参与混合 - 渐变、纯色、图片可以混搭，但 SVG 背景需确保无内联
width/height，否则部分浏览器可能跳过混合
为什么设置了 background-blend-mode 却没效果
最常见的原因是背景图没真正“叠在一起”。CSS 背景叠加有隐含前提：所有背景必须使用相同的 background-origin 和 background-clip，否则浏览器会拒绝混合。
- 默认
background-origin是padding-box，但如果某张图设了border-box，整组混合就会失效 -
background-clip: content-box和padding-box混用也会导致退回到normal - 检查 computed styles，看浏览器是否把
background-blend-mode标为 “invalid” 或直接灰掉 - 用 DevTools 临时删掉其中一张图，看剩下图层是否还能显示——若消失，说明某张图路径错/404/跨域，混合直接中断
background-blend-mode 和 mix-blend-mode 的关键区别
别指望用 background-blend-mode 去混合两个不同 DOM 元素的背景。那是 mix-blend-mode 的事，但它有严重限制：
-
background-blend-mode：只管一个元素内部的多个 background 层 -
mix-blend-mode：让当前元素和它背后的堆叠上下文内容混合（比如父容器背景、兄弟元素、甚至 body 背景），但要求元素不能是 stacking context 根（即不能有z-index、opacity 、<code>transform等触发条件） - 两者不兼容：同时设置时，
background-blend-mode先算完自己的层，再把整个元素作为一层，参与mix-blend-mode的外部混合 - 性能上，
background-blend-mode开销小得多；mix-blend-mode在滚动或动画中容易掉帧
真要混合不同元素的视觉层，优先考虑合成层级控制（will-change: transform + z-index）或 Canvas 绘制，而不是硬套 blend 模式。
