background-blend-mode 仅在单条 background 声明中存在至少两个背景层时生效；写错结构、单层背景、分离声明或 Safari 15.3 及更早版本均会导致其失效。

background-blend-mode 不是给单张图加滤镜，它只在至少两个背景层共存于同一元素的单条 background 声明中时才生效；写错结构、单层背景、分离声明或 Safari 15.3 及更早版本，都会让它彻底“隐身”。

为什么 background-blend-mode 完全没反应？

最常被忽略的是：浏览器根本没把它当混合指令处理，而是直接跳过。常见现象包括 DevTools 里该属性灰掉、computed styles 中不出现、或者写了 multiply 却和没写一样。

• 只写了 background-image: url("a.jpg") —— 没有第二层，无混合对象
• background-color: #fff 和 background-image: url("b.png") 分两行写 —— 浏览器只保留后者，background-blend-mode 失去作用目标
• 用了 background: #000 这类单值简写 —— 它等价于 background-color，不是多层背景
• 某张图 404 或跨域加载失败 —— 整组背景中断，混合逻辑不触发
• background-origin 不一致（比如一个用 border-box，另一个默认 padding-box）—— 浏览器判定“不可混合”，标为 invalid

怎么写才算“正确叠加”的多层背景？

必须把所有图层塞进同一个 background（或 background-image）声明，用逗号分隔，顺序即图层上下关系：靠前的是底层，靠后的是上层。

• ✅ 正确：background: linear-gradient(45deg, #ff6b6b, transparent), url("texture.png"), #fff;
• ❌ 错误：background-color: #fff; background-image: url("texture.png"); —— 分离声明，无效
• ⚠️ 注意：background-color 写成逗号分隔的一部分，才会被识别为独立图层；否则它只是 fallback 色，不参与混合
• ⚠️ 注意：background-blend-mode: multiply, screen 对应三层背景时，只写两个值，第三个自动补 normal；但若写了三个值，就必须严格匹配图层数

哪些混合模式既好用又稳？

别一上来就试 color 或 luminosity —— Safari 16.4 前不支持，Firefox 对 exclusion 渲染也不一致。生产环境优先选这三个：

立即学习“前端免费学习笔记（深入）”；

• multiply：压暗，适合浅色纹理盖在深底色上（如米白底 + 灰噪点），兼容性最好
• screen：提亮，适合深色纹理盖在浅底色上（如藏青底 + 白网点），移动端也稳
• overlay：自动判断明暗倾向，增强对比又保细节，多数 banner 卡片首选；但开启 Display P3 时可能偏灰，真机要测

兼容性和降级必须手动处理

它在 Safari 7.1+、Chrome 35+、Firefox 30+ 支持，但 IE 完全不支持，Safari 15.3 及更早版本会直接忽略整条规则，且无任何提示。

• 务必提供 background-color 作为基础背景 —— 它既是参与混合的一层，也是降级时的最终显示色
• 避免用 background: url() no-repeat 这类简写覆盖掉 background-color —— 显式写出所有背景项
• 强兼容场景下，用 @supports (background-blend-mode: overlay) 包裹增强样式，否则老浏览器直接跳过
• 别和 mix-blend-mode 混用 —— 尤其别套在 position: relative + z-index 的容器里，极易触发意外层叠上下文，导致部分背景消失

最容易被忽略的一点：它只管“一个盒子内部的多个背景”，不管文字、伪元素、子元素，哪怕你把文字和图都塞进同一个容器，文字仍是内容层，不在 background 栈里 —— 想让文字融合底图，得换 mix-blend-mode，但那又是另一套严苛条件了。