background-blend-mode完全没反应的主因是未满足多层背景共存前提：必须用逗号分隔写在同一background声明中（如background: #ff6b6b, url("a.jpg")），分离声明、单层背景、origin不一致或资源加载失败均导致属性被忽略。
background-blend-mode 为什么完全没反应？
最常被忽略的是：浏览器根本没把它当混合指令处理，而是直接跳过。常见现象包括 DevTools 里该属性灰掉、computed styles 中不出现、或者写了 multiply 却和没写一样。
原因几乎总是结构错误，而非浏览器不支持（Chrome 35+、Firefox 30+、Safari 7.1+ 均支持）：
- 只写了
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）声明，用逗号分隔，顺序即图层上下关系：靠前的是底层，靠后的是上层。
✅ 正确示例：
.box {
background: linear-gradient(45deg, #ff6b6b, transparent), url("texture.png"), #fff;
background-blend-mode: multiply;
}
⚠️ 注意点：
-
background-color必须写成逗号分隔的一部分（如示例中的#fff），才会被识别为独立图层；否则它只是 fallback 色，不参与混合 - 不要用 CSS 变量拼接却漏逗号，例如
background: var(--img), #000;才对，background: var(--img) #000;就是单层 - 渐变必须明确写在声明中，不能靠
background-color+background-image分开模拟
哪些混合模式既好用又稳？
别一上来就试 color 或 luminosity —— Safari 16.4 前不支持，Firefox 对 exclusion 渲染也不一致。生产环境优先选这三个：
-
multiply：压暗，适合浅色纹理盖在深底色上（如米白底 + 灰噪点），兼容性最好 -
screen：提亮，适合深色纹理盖在浅底色上（如藏青底 + 白网点），移动端也稳 -
overlay：自动判断明暗倾向，增强对比又保细节，多数 banner 卡片首选；但开启 Display P3 时可能偏灰，真机要测
⚠️ 注意：background-blend-mode: multiply, screen 对应三层背景时，只写两个值，第三个自动补 normal；但若写了三个值，就必须严格匹配图层数。
mix-blend-mode 和 background-blend-mode 别混用
这是逻辑翻车高发区：background-blend-mode 混的是同一个元素的多个 background 图层；mix-blend-mode 是元素级混合，作用于元素与下方内容（比如文字盖在图上）。
混用极易触发意外层叠上下文，导致部分背景消失或混合错位：
- 设置了
position: relative+z-index的容器，再加mix-blend-mode，常使background-blend-mode失效 -
mix-blend-mode要求兄弟元素 + 同 stacking context + 视觉重叠，约束远比background-blend-mode严格 - 想让文字和底图融合？用
mix-blend-mode，但得确保父容器没意外创建隔离上下文（比如没加isolation: isolate）
真正要模糊背景，得用 backdrop-filter: blur()，background-blend-mode 做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
