mix-blend-mode 不改变元素自身颜色，而是让元素内容与背后内容按数学公式混合；对 <img> 直接使用无效，因其默认 backdrop 是父容器背景，若父容器无明确背景或触发隔离上下文（如 isolation: isolate、transform 等），则无法混合。
mix-blend-mode 不是调色工具，它不改变元素自身颜色值，而是让元素内容和它「背后的东西」按数学公式混合出新颜色。直接给 <img> 加 mix-blend-mode 常常没反应，不是语法错，是背后没东西可混。
为什么 mix-blend-mode 对 <img> 直接加无效
浏览器只对「有 backdrop（背后内容）」的元素启用混合。而默认状态下，<img> 的 backdrop 是父容器背景 —— 如果父容器是白色、透明或没设背景，那就等于在白纸上叠一张图，multiply 或 screen 算出来还是白/灰/糊一片。
- 检查父容器是否设置了明确背景：
background: #ff6b6b、background: linear-gradient(...)或background-image - 确认没意外触发隔离上下文：父级若含
isolation: isolate、transform、opacity: 0.99、filter，会切断混合链路 - 别把
<img>当作背景用 ——mix-blend-mode对background-image完全无效，那是background-blend-mode的职责
怎么让图片真正参与混合（实操路径）
核心思路：制造可控的 backdrop，再让图片作为前景去混合。最稳妥的两种方式：
- 用带色/渐变背景的容器包住
<img>，例如：<div class="blend-container"> <img src="photo.jpg" alt=""> </div>
配合 CSS：.blend-container { background: linear-gradient(135deg, #4a00e0, #8e2de2); } .blend-container img { mix-blend-mode: multiply; } - 放弃直接操作
<img>，改用伪元素叠加单色层：.image-wrapper { position: relative; background: url(photo.jpg) no-repeat center/cover; } .image-wrapper::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 0, 100, 0.6); /* 必须带 alpha */ mix-blend-mode: overlay; }这样图片是背景，伪元素是前景，混合自然发生
multiply / screen / difference 怎么选才不翻车
不同模式算法差异大，选错会导致发灰、消失或对比度崩坏：
立即学习“前端免费学习笔记（深入）”；
-
multiply：适合压暗高光区域，但底色太深时几乎无效果；避免用在深色背景上，也别叠加rgba(0,0,0,0.3)—— alpha 预乘会让暗部细节丢失，改用background: #000; opacity: 0.3 -
screen：提亮阴影区，适合浅色底+深图组合；注意在纯白底上会完全“消失”，因为screen公式结果趋近于 1 -
difference：文字适配背景常用，但只保证「黑白反色可靠」；彩色背景如#8ac926和白字混合后产出#7536d9，可能对比度不足，需搭配描边text-shadow: 1px 1px 2px rgba(0,0,0,0.5)保底
iOS Safari 和固定定位的混合陷阱
iOS Safari（尤其 14–15）对 mix-blend-mode 支持有硬限制，不是“不支持”，而是「渲染时机不稳定」：
-
position: fixed+mix-blend-mode组合在 iPhone 上极易白屏或错位，必须规避 - 动画中动态切换
mix-blend-mode值（比如 hover 切multiply→screen）会直接失效，应改为固定模式 + 动态改background-color或opacity - 真机测试不可跳过：模拟器里正常 ≠ 实机可用；建议用
will-change: transform强制 GPU 图层，仅加在混合元素本身，别加父级
真正难的从来不是写对那行 mix-blend-mode: xxx，而是搞清「谁在跟谁混」「中间有没有被隔离」「混合结果在不同设备上是否一致」——这些细节不验证，上线就成玄学。
