mix-blend-mode 非滤镜，需构造重叠结构才能生效：图片须与下方有色层像素叠加，否则无变化；禁与 filter 同用，须分层实现；注意层叠上下文隔离及 iOS 兼容性问题。
mix-blend-mode 本身不是滤镜，不能直接给图片加个属性就变色、模糊或锐化——它只管“这张图怎么跟它底下那层内容混合”，想出效果，得靠结构配合。
为什么直接写 img { mix-blend-mode: screen; } 没反应？
因为 img 默认浮在最上层，它下面要么是父容器的纯白背景（screen 和白色混合=没变化），要么干脆是透明空白。混合需要“背后有东西可混”。
- 父容器没设背景色/渐变 → 混了个寂寞
- 父容器用了
transform、opacity: 0.99或isolation: isolate→ 创建了新层叠上下文，把混合范围锁死在内部，可能切断与更下层的联系 - 把图片当
background-image用 →mix-blend-mode对 background 无效，得换background-blend-mode
想让图片参与混合，必须构造重叠结构
核心思路：让图片和另一个有色层发生像素级叠加。常见做法是用伪元素盖上去，或者套一层带背景的容器。
- 用
::before叠单色层：.photo::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 0, 100, 0.6); mix-blend-mode: multiply; } - 容器设背景色，图片设
mix-blend-mode: screen—— 这时图片是在跟容器背景混合，不是自己变亮 - 双色调要两层：一个
::before用multiply（吃暗部），一个::after用screen（提亮部），颜色都带 alpha，不然糊细节
mix-blend-mode 和 filter 能不能一起用？
不能写在同一元素上。因为 filter（比如 blur() 或 contrast()）会先改原始像素，而 mix-blend-mode 需要未处理的原始值去跟背景算混合——结果常是黑块、白块或 Safari 直接降级为 normal。
立即学习“前端免费学习笔记（深入）”；
- 真要同时有模糊+混合，必须拆成两层：一层放图并设
mix-blend-mode，另一层绝对定位盖上去，单独加filter并显式设mix-blend-mode: normal - 外层容器加
isolation: isolate，防止混合被意外隔离 - iOS Safari（尤其 14–15）对动画中动态切
mix-blend-mode值支持极差，建议固定模式，靠改background-color或opacity实现动效
移动端真机调试最容易忽略的点
不是代码写错，而是层叠上下文被静默打断。比如父容器加了 transform: translateZ(0)（常见硬件加速写法），就会新建 stacking context，导致子元素的 mix-blend-mode 只跟它的透明背景混合，视觉上“消失”。
- 打开 Chrome DevTools 的 Rendering 面板 → 勾选 “Paint flashing”，看实际重绘区域是否覆盖预期混合区
- iOS 上慎用
difference和exclusion，渲染不稳定，滚动时容易闪或失效 - 系统级色彩管理（如 macOS / iOS 的 Display P3）会影响混合结果，设计稿用 sRGB 调色，真机可能偏艳或偏灰
