background-blend-mode: multiply 无效是因为未满足多层背景前提：必须在同一background声明中用逗号分隔至少两个图层（如颜色+图片），分离声明、单层背景或safari 15.3及更早版本均导致属性被浏览器静默忽略。
background-blend-mode: multiply 不是给单张图加滤镜，它只在同一个元素上声明了至少两个背景层时才起作用；写成单层背景、拆成多行声明、或用了不兼容的浏览器（如 Safari 15.3 及更早），它就完全不生效。
为什么 background-blend-mode: multiply 没反应？
最常被忽略的是：浏览器压根没把它当混合指令处理，而是直接跳过。常见现象包括 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；但若写了三个值，就必须严格匹配图层数
mix-blend-mode 和 background-blend-mode 别混用
background-blend-mode 管的是“一个盒子内部的多个背景”，比如 url(a.jpg) 和 linear-gradient() 怎么叠；mix-blend-mode 管的是“多个盒子之间”的像素混合，比如两个 <img> 标签怎么叠。
两者目标完全不同，混用极易触发意外层叠上下文，导致部分背景消失或混合错位：
- 设置了
position: relative+z-index的容器，再加mix-blend-mode，常使background-blend-mode失效 - 别给
<div> 同时设 <code>background-image和mix-blend-mode: multiply去“混合自己”——它不作用于自身背景 - 动画中频繁切换
background-blend-mode值可能引发重绘抖动，建议只用于静态装饰区域
真正容易被忽略的一点
混合效果高度依赖原始图片的明暗分布和色相；multiply 是数学相乘，底色越深，压暗越明显，纯白底几乎无变化；而 Safari 16.4 之前、Firefox 112 之前对 background-color 是否参与混合的支持不一致——想 100% 可控，就用 base64 渐变图替代纯色值，例如：url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23ff6b6b'/%3E%3C/svg%3E")。
