mix-blend-mode生效需同时满足三前提：元素有可渲染内容、背后有非透明底色、与底色同属一个层叠上下文；否则无效。
mix-blend-mode 能让文字和背景图混合，但直接套用几乎必失败——它不作用于“文字 vs 图片”这个直觉关系，而是作用于“当前元素内容 vs 它下方的堆叠上下文”。背景图在父容器上，文字在子元素里，两者必须处于同一层叠上下文中才能混合。
为什么 img 或 background-image 上直接加 mix-blend-mode 没反应？
因为：mix-blend-mode 对 <img> 标签本身无效——它没“背后内容”可混（除非父容器有背景）；对 background-image 也无效——该属性只管元素自身的多层背景，不管文字或子元素。
- 写
img { mix-blend-mode: multiply; }→ 混合对象是 img 下方的父背景（如果存在），不是它自己的图片内容 - 写
.box { background: url(bg.jpg); } .text { mix-blend-mode: overlay; }→ 只有当.text在 DOM 中位于.box内部且未被隔离，才可能生效 - 父容器用了
isolation: isolate、opacity: 0.99、transform: scale(1)→ 立刻切断混合链，文字变成“孤岛”
mix-blend-mode 必须配合重叠结构才能生效
要让文字真正和背景图混合，得构造一个“文字层盖在背景层之上”的视觉栈，且不能意外创建新层叠上下文。
- 背景图必须设在**父容器**上（如
.card { background: url(...) }），文字放在其内部子元素中（如<p class="title">） - 父容器不能有
isolation: isolate，也不能触发隐式层叠上下文（比如加了opacity或transform） - 文字元素需设纯色（推荐
color: #fff或#000），避免中间值（如#666）导致混合后灰蒙蒙不可读 - 若父容器背景是渐变或图片，确保它没有被
z-index或position: relative+overflow: hidden等间接隔离
选哪个混合模式？看你要什么效果
不同模式对同一张图+白字产生的结果差异极大，别靠猜，按目标选：
-
multiply：变暗。适合浅色背景图上压出深色文字轮廓，但深图上会发灰甚至消失 -
screen：变亮。适合深图上提亮文字，但浅图上容易过曝成一片白 -
overlay：自动判断明暗区，亮区用screen、暗区用multiply，兼容性好、容错高，日常首选 -
difference：反色。白字在黑图上变白，在白图上变黑，但中灰区域（#808080）算出来还是#808080，对比度崩坏
移动端和旧 Safari 的坑特别多
iOS Safari 14–15、部分 Android WebView 对 mix-blend-mode 支持残缺，尤其在 position: fixed 导航栏、滚动容器或用了 backdrop-filter 的场景下，混合常被静默降级为 normal。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools 打开 “Rendering” → 勾选 “Paint flashing”，看文字和背景是否真有重叠绘制（没闪就是没混合）
- 不要在
@keyframes里动画切换mix-blend-mode值——浏览器根本不支持过渡，只会跳变 - 生产环境强烈建议 fallback：用 JS 检测
getComputedStyle(el).mixBlendMode是否为"difference"，不支持时改用backdrop-filter+ 半透明白底遮罩
mix-blend-mode: overlay → 删掉所有可能触发层叠上下文的样式 → 在 iOS 16+ 和 Chrome 110+ 验证后再上线。别指望它在所有设备上都“自动工作”，混合模式本质是视觉 trick，不是逻辑适配。 
