background-blend-mode未生效的最常见原因是背景层未正确叠加：必须用逗号分隔写在同一background声明中，分离声明、单层背景、origin/clip不一致或资源加载失败均导致失效。
background-blend-mode 只在多个背景层共存于同一元素的单条 background 声明中时才生效，写错结构、拆分声明或只有一层背景，它就完全不工作。
为什么 background-blend-mode 没反应？
最常见原因不是浏览器不支持，而是背景层根本没“叠起来”：
- 把
background-image和background-color分成两行写 → 浏览器只认最后一条，background-blend-mode失效 - 只写了
background: url(a.jpg);→ 单层背景，无混合对象 - 用了
background: #fff;这种简写 → 它等价于background-color，不是多层 - 某张图 404 或跨域加载失败 → 整组背景中断，混合直接跳过
-
background-origin或background-clip不一致（比如一个用border-box，另一个是默认padding-box）→ 浏览器拒绝混合，DevTools 里该属性会标为 invalid
怎么写才算“正确叠加”的多层背景？
必须用逗号分隔、塞进同一个 background 或 background-image 声明里，顺序决定图层上下关系（靠前的是底层，靠后的是上层）：
.box {
background: linear-gradient(45deg, #ff6b6b, transparent), url("texture.png"), #fff;
background-blend-mode: multiply;
}
- 渐变是底层，纹理图居中，纯白是顶层（隐式第 3 层），三者参与混合
-
background-color写成逗号分隔的一部分，才能被识别为独立图层 - 不要用 CSS 变量拼接路径却忘了加逗号，例如
background: var(--img), #000;才对，background: var(--img) #000;就是单层
哪些混合模式既好用又稳妥？
别一上来就试 color 或 luminosity——Safari 15.4 之前全忽略，Firefox 对 exclusion 渲染也不一致：
-
multiply：适合浅色纹理压暗底色（如米白底 + 灰噪点），兼容性最好 -
screen：适合深色纹理提亮底色（如藏青底 + 白网点），移动端也稳 -
overlay：自动判断明暗倾向，统一色调最省心，但 iOS/Android 开启 Display P3 色彩管理时可能偏灰，真机要测 - 避免在
@keyframes里动态改background-blend-mode→ 强制整块重绘，旧 iPad 明显掉帧
文字和图片怎么混合？别用 background-blend-mode
它只管背景层，不管文字、::before、子元素——哪怕你把文字和图都塞进同一个容器，文字仍是“内容”，不在 background 栈里：
- 想让文字和底图融合 → 改用
mix-blend-mode，但注意：父元素得加isolation: isolate防止意外穿透 - 想让两个不同 DOM 元素的背景混合 →
background-blend-mode无能为力，那是mix-blend-mode的事，且受层叠上下文限制 - 复杂效果（比如图+渐变+文字+遮罩）别硬塞一层，拆成嵌套结构更可控，也方便调试
真正容易被忽略的点是：混合结果高度依赖原始像素值。一张低对比度图配纯白底，multiply 可能全变白；一张 PNG 有透明通道但 alpha 值接近 0，它在混合中几乎不参与运算——效果出不来时，先看图层本身是不是“可混合”的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
