mix-blend-mode 直接作用于 <img> 无效，因其为替换元素且需与背后内容混合；应改用 background-blend-mode 配合 background-image，或通过 isolation: isolate 容器隔离后应用。
mix-blend-mode 不能直接用在 Bootstrap 图片上
直接给 <img> 元素加 mix-blend-mode 基本无效，因为：
• <img> 是替换元素（replaced element），其渲染行为受浏览器限制，多数情况下忽略混合模式
• Bootstrap 的 .img-fluid、.img-thumbnail 等类只影响尺寸和边框，不改变图层合成上下文
• 即使生效，也会和父容器背景、相邻元素意外混合，导致图片局部发黑、文字变透明或边缘“吃掉”邻近内容
• Safari 和旧版 Chrome 对 <img> 上的 mix-blend-mode 支持极差，iOS 16.4 之前基本不工作
真正可用的方案：用 background-blend-mode + 伪元素或容器
想让图片参与混合，必须把它变成 CSS 背景层——也就是放弃 <img> 标签，改用 background-image 配合 background-blend-mode：
- 把图片设为容器的
background-image，再叠加一层渐变或纯色背景（如linear-gradient(rgba(255,0,100,0.4), transparent)） - 确保渐变写在图片前面（即更上层），否则无法参与混合
- 必须显式声明
background-size: cover和background-position: center，否则裁切错位 - 禁用
background-color——它会创建独立 stacking context，阻断混合链 - 移动端真机调试时，注意系统级色彩管理（如 iOS Display P3）会让
multiply看起来像darken，这不是 bug，是颜色空间转换结果
示例：
.blend-bg {
background: linear-gradient(135deg, rgba(255,0,100,0.4), transparent), url('photo.jpg');
background-blend-mode: multiply;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}如果非要用 <img> 标签，只能靠 isolation + wrapper
极少数场景必须保留 <img>（比如需要 srcset、懒加载或无障碍 alt），唯一可行路径是隔离图层：
立即学习“前端免费学习笔记（深入）”；
- 给
<img>外层容器加isolation: isolate，防止混合外溢到兄弟元素 - 把图片本身包进一个
<span>或<div>，再给该内层元素设mix-blend-mode: overlay - 父容器背景必须是纯色或简单渐变，禁用
background-image，否则混合结果不可预测 - 任何祖先元素设了
opacity < 1或transform，都会中断混合链——Bootstrap 的.card、.alert很多自带transform，要小心 - 必须加
@supports (mix-blend-mode: overlay)查询做降级，否则老设备直接失效
别碰 will-change 和 opacity，它们和混合模式互斥
Bootstrap 5.3 默认给按钮、卡片等组件加了 will-change: transform，一旦和 mix-blend-mode 同时存在，Chrome 会静默降级——整个混合效果消失，控制台也不报错。
同样，以下写法都会让混合失效：
- 给混合容器或其任意祖先设
opacity: 0.99（哪怕只是 0.99） - 用
filter: blur(1px)或filter: drop-shadow()—— filter 会创建新 stacking context - Bootstrap 的
.bg-opacity-*工具类本质就是opacity，不能和混合共存
最易被忽略的是：哪怕你没主动写这些属性，第三方插件或框架默认样式可能已经悄悄加上了。真要调试，得逐层检查 computed styles 里的 stacking context 创建原因。
