必须用background简写声明多层背景，因background-color单独声明被浏览器视为不可参与混合的“底层画布”，不进入图层栈，导致background-blend-mode失效；正确写法是background: red, url(a.jpg)或用linear-gradient(red, red)模拟纯色层以确保兼容性。
必须用 background 简写，不能拆成 background-color 和 background-image 单独写——否则多层失效，混合模式也无效。
为什么 background-color 单独声明不算一层？
浏览器把 background-color 当作“画布底色”，不是可参与叠加的图层。它不进入 background 的图层栈，background-blend-mode 根本找不到它。哪怕你写了 background-blend-mode: multiply，只要没把它塞进 background 的逗号列表里，就等于没写。
- 错误写法：
background-color: red; background-image: url(a.jpg);→ 只有一张图 + 底色，无混合 - 正确写法：
background: red, url(a.jpg);→ 两层，可混合 - 更稳妥写法：
background: linear-gradient(red, red), url(a.jpg);→ 渐变是标准图像值，兼容性更好
background 多层写法中各参数怎么配对？
所有层共用一套 background-position、background-size、background-repeat，但值必须一一对应、用逗号分隔。顺序错一位，整层就偏移。
- 例如三层背景：
background: layer1, layer2, layer3; - 那么
background-position: top left, center, bottom right;→ 第一个值配layer1，第二个配layer2 -
background-size: 100% 100%, auto, cover;→layer1铺满，layer2原尺寸，layer3缩放适配 - 漏写或少写一个值？浏览器会循环复用最后一个，导致某层错位
用 linear-gradient 模拟纯色层比直接写颜色更可靠
直接写 red 在某些旧版 Safari 或 Android WebView 中可能被降级处理；而 linear-gradient(red, red) 是明确的图像值，能稳定参与 background-blend-mode 计算，且支持 alpha 控制。
立即学习“前端免费学习笔记（深入）”；
- 半透明红层：
linear-gradient(rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.4)) - 避免写
background-size: 100% 200px给渐变——它不接受像素高度，只认auto、100%或cover - 若需控制某层位置偏移（如纹理右移），用
background-position: 20px 0, 0 0, 0 0;，仅改对应位置的值
哪些混合模式真正能上线用？
别信 MDN 上全列表。生产环境只盯死三个：multiply、screen、overlay。其余像 color-dodge 或 exclusion 在 Safari 或旧安卓上要么不渲染，要么颜色翻车。
-
multiply：浅色纹理压暗底色，兼容性最好 -
screen：深色纹理提亮底色，移动端也稳 -
overlay：自动适配明暗，但开启 Display P3 的设备可能偏灰，真机必测 - DevTools 里
background-blend-mode显示灰色？先查图是否 404、跨域，再看background-origin是否混用（比如一个border-box，另一个默认padding-box）
最容易被忽略的是：所有层必须在同一 background 声明里，且资源加载成功——一张图失败，整组混合中断；CSS 变量拼接时漏逗号（var(--a) #000 是单层，var(--a), #000 才是双层）。
