background-blend-mode混合同一元素的多个背景图层，mix-blend-mode混合当前元素与背后内容；前者要求背景合并声明且不兼容旧Safari，后者受层叠上下文限制且需下方有可混内容。
background-blend-mode 和 mix-blend-mode 是现代 CSS 中唯二原生支持颜色混合的属性，但它们作用对象完全不同——用错一个，效果就完全消失。
background-blend-mode：只混“同一元素”的多个背景层
它不处理 background-color 和 background-image 分开写的组合，也不管父级背景或文字。只认「单条 background 声明里用逗号分隔的图层」。
- 必须合并写：
background: linear-gradient(#ff6b6b, #ff6b6b), url("a.jpg");—— 把纯色转成linear-gradient才算合法图层 - 图层顺序决定混合路径：前面的图层是上层，后面的图层是底层；
multiply会让上层“压暗”下层，所以想调色，颜色层通常放前面 - Safari ≤15.3 完全忽略该属性，iOS 13.4+ 才稳定支持；Chrome/Firefox 没问题
- 常见翻车：
background-color: #fff;和background-image: url(...);分两行写 → 属性被浏览器静默丢弃
mix-blend-mode：混“当前元素”和它背后的所有内容
mix-blend-mode 不作用于图片自身像素，而是让整个元素（含文字、边框、透明区域）与 z 轴更靠下的内容混合——比如父容器背景、兄弟元素、甚至 body 的背景色。
-
<img>直接加mix-blend-mode无效？大概率因为父容器是纯白背景，或触发了isolation: isolate/transform/opacity: 0.99等新层叠上下文，把混合链切断了 - 想让图片染色，得确保它下面有可混的内容：要么父容器设了非白色背景，要么用伪元素在图片下方垫一层有色层（
::before+z-index: -1） - iOS Safari（尤其 14–15）在动画中动态改
mix-blend-mode值会失效；稳妥做法是固定模式，改background-color或opacity - 它对
background-image无效——那是background-blend-mode的地盘
别混淆：什么时候该用哪个？
判断依据只有一个：你要混合的对象是否属于同一个 DOM 元素的背景层？
立即学习“前端免费学习笔记（深入）”；
- 是 → 用
background-blend-mode：比如一张图 + 一层渐变蒙版 + 一个噪点纹理，全塞进background - 否 → 用
mix-blend-mode：比如标题文字要融入背后的 banner 图，或<div>形状要和父级渐变背景融合 - 想给
<img>加滤镜又不想动语义结构？别硬套mix-blend-mode，优先考虑filter: brightness() contrast() hue-rotate()—— 它直接操作像素，不依赖层叠上下文
最容易被忽略的一点：两种混合都依赖色彩空间一致性。如果图片是 sRGB，而页面启用了 display-p3，某些混合结果会偏灰或过饱和，DevTools 的 Rendering 面板里打开 “Color gamut visualization” 能快速验证。
