mix-blend-mode需两个同层叠上下文且视觉重叠的元素才能生效；单图无底物、父容器隔离或未重叠均导致无效，须用伪元素/背景色构造混合条件并避开兼容性陷阱。
mix-blend-mode 不是滤镜，不能直接给单张图片“上色”或“调色”，它只在两个视觉重叠、同属一个层叠上下文的元素之间发生像素级混合。没效果？八成是结构没搭对。
为什么 img { mix-blend-mode: multiply; } 没反应
因为 <img alt="怎样在CSS中使用mix-blend-mode实现图层混合特效" > 默认浮在最顶层，背后要么是纯白父容器背景（multiply 和白色混合=不变），要么是透明空白——没有“底物”可混，自然没变化。
- 父容器没设背景色/渐变 → 混了个寂寞
- 父容器用了
transform、opacity: 0.99或isolation: isolate→ 新建了层叠上下文，切断混合链 - 把图当
background-image用 →mix-blend-mode对 background 无效，得换background-blend-mode - 没做视觉重叠：比如兄弟元素没设
position: relative或z-index，压根没盖上去
怎样让 mix-blend-mode 真正生效
核心就一条：构造两个能重叠、不隔离、有内容的 DOM 元素，让上面那个去跟下面那个混合。
- 用伪元素叠加：
.photo::before设position: absolute+background: rgba(255, 0, 100, 0.6)+mix-blend-mode: multiply，确保它盖在<img alt="怎样在CSS中使用mix-blend-mode实现图层混合特效" >上 - 用容器背景做底物：给父
<div> 设 <code>background: linear-gradient(#ff0066, #00a8ff)，再给子<img alt="怎样在CSS中使用mix-blend-mode实现图层混合特效" >加mix-blend-mode: screen - 禁用所有会触发新层叠上下文的属性：删掉父级的
transform、opacity 、<code>will-change: transform和isolation: isolate - 用 Chrome DevTools 的 “Rendering” 面板 → 勾选 “Paint flashing”，确认重叠区域真有绘制
-
multiply：逐通道相乘（Cb × Cs），深色区域变暗明显，浅色几乎不变；适合压暗高光、叠加阴影色块 -
screen：反相相乘再反相（1 − (1−Cb) × (1−Cs)），亮色更突出；适合提亮局部、模拟泛光，但底图稍亮就发灰 -
overlay：自动判断明暗——暗区用multiply，亮区用screen；对照片最自然，但纯色块上易过曝，中间灰阶过渡可能生硬 - 半透明参与混合时，会先合成自身 alpha，再算混合值，结果比直觉更“灰”，务必用
rgba()控制透明度 - 绝对不要在
@keyframes里改mix-blend-mode值 —— 改用固定模式，靠动background-color或opacity实现效果 - 真机调试最容易忽略的不是代码错，而是层叠上下文被静默打断（比如父容器加了
transform: translateZ(0)） - 降级方案别只写
@supports (mix-blend-mode: difference)，iOS 旧版可能识别为支持却渲染异常，建议结合userAgent或特性检测兜底
multiply / screen / overlay 效果差异在哪
别靠名字猜，它们是数学公式：
立即学习“前端免费学习笔记（深入）”；
iOS Safari 和低端 Android 的兼容性陷阱
iOS 14–15 是重灾区：动画中动态切 mix-blend-mode 值大概率失效，will-change: transform 会让混合层跳变，某些 GPU 配置下直接禁用。
真正难的不是写对那一行 mix-blend-mode，而是让整个层叠结构老老实实按你设想的方式堆叠——浏览器不会告诉你哪一层悄悄把自己关进了隔离泡泡里。
