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，但那又是另一套严苛条件了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
