mix-blend-mode: multiply 仅混合元素内容与背后内容层，不作用于自身 background-image；需 img 标签、纯色背景、同一 stacking context 三者缺一不可，否则失效。
mix-blend-mode: multiply 能让 <img> 和它背后的纯色背景“相乘”，从而视觉上“吃掉”同色区域，实现类似去背或融合的效果——但仅当图片本身有浅灰/白底、背景是单一纯色时才可靠；非纯色背景或带噪点的图会出怪色。
为什么 mix-blend-mode: multiply 不直接作用于 background-image
这是最常踩的坑：mix-blend-mode 混合的是元素**内容**（比如 <img> 的像素）和它**背后的内容层**（比如父容器的背景色、其他兄弟元素），但它**不混合元素自身的 background-image**。也就是说，你不能给一个 <div> 同时设 background-image 和 mix-blend-mode: multiply 来让它和自己的背景图混合——那得用 background-blend-mode。
-
mix-blend-mode是“元素级混合”，目标是 DOM 元素之间的视觉叠加关系 -
background-blend-mode才是“背景层内混合”，专用于单个元素的多个背景（如url() + linear-gradient()） - 想让图片和页面背景色叠底，必须把
<img>当作独立元素，放在有纯色背景的容器里
必须满足的三个条件才能看到 multiply 效果
哪怕写对了 CSS，缺一不可：
- 图片和背景必须在视觉上重叠：比如
<img>不能被display: none、visibility: hidden或完全移出视口 - 它们必须处于同一 stacking context：父容器不能有
isolation: isolate、transform、filter、opacity < 1等会创建新 stacking context 的属性 - 图片不能是背景图：必须是
<img src="...">标签，且没有被background-image替代
常见失效场景：<div style="background: #fff; transform: scale(1)"><img></div> ——这里的 transform 就悄悄创建了新 stacking context，mix-blend-mode 直接失效。
立即学习“前端免费学习笔记（深入）”；
multiply 在深色/浅色背景下的实际表现差异
multiply 的数学逻辑是：每个通道值 = (A × B) / 255。所以它天然偏暗，对不同背景色效果反差极大：
- 背景是
#ffffff（白色）：图片几乎不变，因为 ×1 不改变数值 - 背景是
#000000（黑色）：图片全变黑，因为 ×0 = 0 - 背景是
#fbd290（浅橙）：能有效压暗图片中高光区域，让白底图“融进”背景，常用于去白底 logo - 背景是渐变或多色：结果不可控，可能出现脏边或色块断裂
如果想增强融合感，可配合 opacity: 0.9 或 filter: contrast(1.1) 微调，但别盲目降透明度——opacity < 1 会触发新 stacking context，反而破坏混合。
真正难处理的不是怎么写这行 CSS，而是判断当前 DOM 结构是否允许它生效；很多时候问题不出在 multiply 本身，而出在某个没注意的 transform 或 will-change 上。建议先用浏览器开发者工具检查“Computed”面板里的 “Isolation” 和 “Stacking Context” 状态。
