必须用background-blend-mode: multiply实现同一元素多背景层混合（如图+色），或mix-blend-mode: multiply实现跨元素内容与背后像素叠加；二者适用场景截然不同，选错则完全无效。
不能用 color-mix()，必须用 background-blend-mode: multiply 或 mix-blend-mode: multiply，但二者适用场景完全不同——选错就完全没反应。
background-blend-mode: multiply 用于同一元素内的多背景混合
它只在你给一个元素设了**多个背景层**（比如一张图 + 一种颜色，或两张图）时才起作用。浏览器按从上到下的顺序把它们“叠在一起”算混合结果。
- 语法必须写全：
background-image: url(a.jpg), linear-gradient(to bottom, #ff0000, transparent); background-color: #fff; background-blend-mode: multiply;—— 少一个背景层，background-blend-mode就静默失效 - 背景层顺序很关键：最左边的背景在最上层，
multiply是上层“乘”下层，所以想让粉色盖在图上变暗，就得把粉色放background-image列表的前面 - 不支持单背景 + 单颜色以外的组合：比如只写
background: url(a.jpg); background-blend-mode: multiply;，什么都不会发生 - 兼容性较好，Chrome 57+、Firefox 51+、Safari 14.1+ 都支持，但 iOS 13.3 及更早版本不支持
background-blend-mode与渐变混合
mix-blend-mode: multiply 用于跨元素的视觉叠加
它让**当前元素的内容**（文字、图片、SVG）和它**背后真实渲染出的像素**做乘法运算。这才是最接近 Photoshop 图层“正片叠底”的行为。
- 必须满足三个硬条件同时成立：元素有可渲染内容（
<p>text</p>或<img>，不能是空<div></div>）、背后有非透明像素（父容器background-color或兄弟元素）、没被transform/opacity: 0.99/filter切断层叠上下文 - 常见翻车点：
<div style="background: url(photo.jpg); mix-blend-mode: multiply"></div>—— 背景图不算“内容”，这个mix-blend-mode完全无效 - 移动端尤其敏感：iOS 14–15 中，给元素加
will-change: transform会直接禁用混合；动画里动态改mix-blend-mode值大概率卡顿或失效 - 效果不是“调色”，而是实时像素计算：纯白区域会变成完全透明，深灰会更黑，中间灰阶压缩明显——别指望它和 Photoshop 的 Multiply 输出一模一样
为什么 color-mix() 不能替代？
color-mix(in srgb, #ff0000 50%, #0000ff 50%) 只是把两个颜色线性插值出第三个确定值，比如 #7f007f。它不看背景、不处理 alpha、不参与渲染混合阶段。你把它用在 color 或 background-color 上，得到的就是一个静态色块，和 Photoshop 的“正片叠底”毫无关系。
真正容易被忽略的是：你试图解决的问题，决定了该用哪个 API。background-blend-mode 是拍平后的背景滤镜，mix-blend-mode 是活的图层叠加，而 color-mix() 只是设计师系统里的配色计算器——混用它们，DevTools 里再怎么刷新也得不到你要的效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
