background-blend-mode必须显式声明才能触发像素级混合，仅写background: url(a.jpg), url(b.jpg)默认按normal模式叠加，第二层完全覆盖第一层；需用逗号分隔的对应混合模式值（如multiply, screen）严格匹配图层顺序。
background-blend-mode 多背景图合成必须显式声明模式
直接写 background: url(a.jpg), url(b.jpg) 不会自动混合——浏览器默认用 normal 模式，等于第二层完全盖住第一层。必须加 background-blend-mode 才触发像素级计算。
常见错误是漏掉这个声明，或者只写一个值却配了多个背景：
- 两个背景图 → 至少提供两个
background-blend-mode值，用逗号分隔，顺序严格对应图层堆叠顺序（从上到下） - 写成
background-blend-mode: multiply却有三张背景图 → 只有第一张和第二张参与混合，第三张按normal覆盖 - 值数量不足时，浏览器会循环复用，但结果不可控，尤其在 Safari 中容易出错
multiply + screen 组合最稳，慎用 hard-light 和 exclusion
multiply 压暗、screen 提亮，两者搭配能保留明暗结构又不丢失细节，适合照片+纹理/渐变的合成场景。
而 hard-light 在 Safari 16.6+ 仍有边缘渲染抖动问题，exclusion 在 iOS 17 真机上偶发色偏；difference 和 color-dodge 对输入色值极度敏感，稍有灰阶偏差就溢出成纯黑或纯白噪点。
实操建议：
- 优先用
background-blend-mode: multiply, screen处理「底图 + 高光纹理」 - 若需强调质感，改用
overlay替代hard-light，兼容性更好 - 避免在
background-size: cover下使用luminosity或color，Chrome 与 Firefox 渲染结果不一致
渐变必须参与 background 层叠才能被 blend
很多人想用线性渐变当“调色底板”，但写成 background: url(img.jpg); background: linear-gradient(...) 是错的——后者会覆盖前者，只剩渐变。
正确写法是把所有图层（含渐变）写进同一个 background 声明里：
.artistic {
background: linear-gradient(135deg, rgba(255,0,100,0.4), transparent),
url(photo.jpg);
background-blend-mode: multiply;
background-size: cover;
}
注意点：
- 渐变必须放在图片前面（即更上层），否则无法参与混合
- rgba() 的 alpha 值影响最终透明度，设为
0.3–0.6区间最易控 - 不要给渐变加
background-color，它会创建新层叠上下文，阻断混合
移动端真机调试最容易忽略的色彩管理干扰
CSS 混合模式在 iOS / Android 系统级色彩管理开启时，可能让 multiply 看起来像 darken，screen 偏灰——这不是 bug，而是设备把 sRGB 输入转成了 Display P3 输出再计算。
解决方法不是关系统设置，而是提前适配：
- 在设计阶段用 P3 色域预览工具校验颜色值，避免依赖 sRGB 下的视觉判断
- 对关键混合层加
image-rendering: -webkit-optimize-contrast（仅 Safari），缓解 P3 插值失真 - 真机测试时禁用 Chrome DevTools 的 “Emulate CSS media features” → “prefers-color-scheme”，否则混合结果会异常
复杂点不在语法，而在你无法绕开的物理显示层——同一段 CSS，在 iPhone 15 Pro 和 Pixel 8 上的混合输出，本质是两套不同色彩空间里的数学运算结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
