background-blend-mode仅对同一background声明中逗号分隔的多图层生效；单独声明background-color会被忽略，必须写成background: #ff0000, url("a.jpg")或用linear-gradient(rgba)模拟可混合色层。
background-blend-mode 不能直接混合 background-color 和其他图层——它只对同一 background 声明里的多个逗号分隔图层生效，而 background-color 单独声明时会被忽略或降级为底层不可参与混合的“背景画布”。
为什么 background-color 写在单独一行就无效？
浏览器把 background-color 和 background-image 当作两个独立声明处理，background-blend-mode 找不到“多层背景”这个前提，直接跳过。即使你写了 background-blend-mode: multiply，它也毫无作用。
- 错误写法：
background-color: #ff0000;+background-image: url("a.jpg"); - 正确写法：
background: #ff0000, url("a.jpg");（必须在同一行、用逗号分隔） -
background-color只有作为background简写中的一层时，才会被识别为可混合图层
怎么用渐变模拟纯色并参与混合？
想让“颜色层”真正参与 background-blend-mode 计算，得把它写成 linear-gradient 或 radial-gradient，哪怕只是单色：
-
linear-gradient(red, red)等价于不透明红色块，但它是可混合图层 - 加 alpha 更可控：
linear-gradient(rgba(255,0,0,0.5), rgba(255,0,0,0.5)) - 每层必须显式设
background-size和background-position，否则默认铺满，互相遮盖 - 顺序决定叠放：靠前的是底层，靠后的是上层（比如
background: bottom-layer, middle-layer, top-layer）
哪些混合模式实际能用、不容易翻车？
别碰全列表——color-dodge、exclusion、luminosity 在 Safari 或旧 Android 上要么不支持，要么渲染不一致。生产环境盯死这三个：
立即学习“前端免费学习笔记（深入）”；
-
multiply：适合浅色纹理压暗底色（如米白底 + 灰噪点），Chrome/Firefox/Safari 15.4+ 全兼容 -
screen：适合深色纹理提亮底色（如藏青底 + 白网点），移动端也稳 -
overlay：自动判断底色明暗倾向，色调统一感强，但开启 Display P3 色彩管理的设备可能偏灰，真机必测
常见失效场景和排查线索
DevTools 里 background-blend-mode 显示灰色或划掉？不是代码写错，大概率是结构或资源问题：
- 某张图 404 或跨域加载失败 → 整组背景中断，混合跳过
-
background-origin不一致（比如一个用border-box，另一个默认padding-box）→ 浏览器拒绝混合，属性标为invalid - CSS 变量拼接漏逗号：
background: var(--img) #000;是单层；background: var(--img), #000;才是双层 - Safari ≤15.3：该属性完全被忽略，连
normal都不渲染
真正要叠加颜色，核心就一条：所有图层（含“颜色”）必须塞进同一个 background 声明，用逗号分隔，且至少两层。透明度控制、尺寸定位、顺序排列，这些细节比选哪个混合模式更关键。
