mix-blend-mode对img失效是因为img作为替换元素默认位于顶层，缺乏背后可混合内容；需同级重叠、禁用层叠上下文、父容器isolation为auto才能生效。
直接给 <img> 加 mix-blend-mode 大概率没反应——不是写错了，而是它根本没满足混合发生的前提条件。
为什么 mix-blend-mode 对 img 标签经常失效
mix-blend-mode 不是“给图片加滤镜”，而是让当前元素的像素和它**背后的内容**做逐通道运算。而 <img> 是替换元素，默认渲染在顶层，下面往往只有空白或父容器背景；若父容器没设背景色、或触发了新层叠上下文（比如用了 transform、opacity: 0.99、isolation: isolate），混合链就断了。
- 常见现象：DevTools 里属性显示生效，但页面完全没变化
- 排查重点：打开 Chrome 的 Rendering 面板 → 勾选 “Layer borders”，看图片是否真和背景/兄弟元素处于同一合成层
- Bootstrap 等框架中，
.card、.alert内部常隐式带transform或opacity，直接套用会静默失败
让两张 img 元素真正混合的硬性要求
必须同时满足这四点，缺一不可：
- 两张
<img>是**同级兄弟元素**（不能一个在 div 里、一个在 body 下） - 它们在视觉上**严格重叠**（至少要用
position: absolute+ 相同top/left，仅靠z-index不够） - 共同父容器 **不能创建新层叠上下文**：禁用
transform、filter、opacity < 1、isolation: isolate - 父容器的
computed isolation必须是auto，不是isolate
实操建议：先把两张图提到 <body> 直接子级测试，如果这时能混合，说明中间某层“偷偷”隔离了上下文。
立即学习“前端免费学习笔记（深入）”；
替代方案：用 background-blend-mode 更稳
如果目标只是让一张图和纯色/渐变融合（比如去白底、双色调），放弃 <img>，改用 background-image + background-blend-mode：
.blend-bg {
background: linear-gradient(rgba(255, 0, 100, 0.4), transparent), url('photo.jpg');
background-blend-mode: multiply;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
- 优势：不依赖 stacking context，iOS Safari 和低端 Android 兼容性好得多
- 注意点：渐变必须写在
url()前面，否则无法参与混合；禁用background-color，它会阻断混合链 - 不能混两个独立图片——这是
background-blend-mode的能力边界
必须保留 <img> 标签时的兜底做法
当需要 srcset、懒加载、alt 语义等特性时，唯一可行路径是包裹 + 隔离：
- 外层容器加
isolation: isolate，防止混合外溢到兄弟元素 - 内层再包一层
<div>，把<img>放进去，并给该<div>设mix-blend-mode: overlay - 父容器背景只能是纯色或简单渐变，禁用
background-image - 任何祖先元素都不能有
opacity < 1或transform，否则混合链仍会中断
最易被忽略的一点：混合效果高度依赖色彩空间和背景纯度。在 iOS 设备上，Display P3 色域会让 multiply 看起来像 darken，这不是 bug，是系统级颜色管理的结果——别在真机调试前只看桌面浏览器效果。
