mix-blend-mode 只作用于元素内容与背后堆叠上下文的混合，不支持 background-image 和无内容的伪元素；生效需元素有可渲染内容且背后有底色；常见失效因 stacking context 中断，应加 isolation: isolate 修复。
mix-blend-mode 不支持背景图和伪元素，别白费劲
直接说结论：mix-blend-mode 只作用于**元素内容与它背后的堆叠上下文（stacking context）之间的混合**，不适用于 background-image、::before/::after 伪元素（除非它们是独立的、有内容的、参与了正常层叠的元素），也不影响父容器背景。常见错误是给一个带 background-image 的 div 设置 mix-blend-mode: multiply，结果毫无反应——因为背景图不算“内容”，它不参与混合计算。
真正起效的前提是：该元素必须有可渲染的内容（比如文字、子元素、SVG图形等），且背后有其它元素（或 body 背景）提供“底色”。实操建议：
- 把要混合的图层拆成多个真实 DOM 元素（例如用
<img alt="CSS如何实现类似PhotoShop的混合模式_mix-blend-mode实战" >或<div> + <code>background-color），确保它们在同一个 stacking context 中按顺序堆叠 - 避免对仅靠
background显示图像的容器设mix-blend-mode；改用<img alt="CSS如何实现类似PhotoShop的混合模式_mix-blend-mode实战" >标签并设position: absolute叠在其它元素上 - 如果必须用伪元素模拟图层，得让它生成真实内容（如
content: ""+background-image+display: block），再配合z-index控制层级 -
multiply：适合文字压在图片上时做“去白留黑”（如 logo 叠在浅色图上），但注意纯白区域会完全透明，慎用于含白色细节的图层 -
screen：适合光效叠加（如霓虹光晕），但底图稍亮就会发灰，建议搭配opacity: 0.7控制强度 -
overlay：对比度提升最猛，适合海报标题强化，但会放大噪点，低分辨率图慎用 -
difference：调试神器——翻转颜色便于快速检查图层对齐，但上线前务必关掉，它会让彩色信息完全不可读 - 打开 DevTools → Elements 面板，右键目标元素 → “Show stacking order”，确认它是否被包裹在意外的 context 中
- 给混合图层的**最近共同父容器**加
isolation: isolate，强制它成为独立混合单元（这是最常用解法） - 避免在混合链路上游使用
opacity: 0.99这类“看似无害”的设置——它会静默创建 stacking context - 如果用了
position: fixed或sticky，注意它默认脱离文档流，混合对象变成 viewport 背景，而非预期的下层元素 - 能用 CSS 渐变或
box-shadow模拟的效果，就别用mix-blend-mode + filter叠加 - 动画中避免动态切换
mix-blend-mode值——浏览器无法硬件加速，会降级为 CPU 渲染 - 移动端务必测试：iOS Safari 对
hard-light和color-dodge支持弱，部分机型直接忽略，优先选multiply/screen - 用
contain: paint限制混合区域范围，防止浏览器盲目重绘整屏
multiply / screen / overlay 在网页中实际效果差异明显
mix-blend-mode 的值不是 Photoshop 里点一下就一模一样——浏览器实现基于 sRGB，且不支持 Alpha 通道预乘处理，所以暗部/亮部细节常被压缩。比如 multiply 在网页中会让深灰变黑得更彻底，screen 容易过曝，而 overlay 对中间调增强强烈但容易失真。
典型使用场景和取舍：
立即学习“前端免费学习笔记（深入）”；
混合失效？先检查 stacking context 和 isolation
90% 的“设了没反应”问题出在层叠上下文被意外切断。例如父容器用了 transform、filter、will-change 或 opacity ，就会创建新的 stacking context，导致子元素只能跟这个新 context 的背景混合，而不是页面更底层的内容。
排查和修复步骤：
性能敏感：滤镜+混合一起用可能触发全图重绘
mix-blend-mode 本身开销不大，但一旦和 filter（尤其是 blur()、drop-shadow()）或 transform: scale() 同时存在，浏览器会为每个混合图层单独建一层离屏缓冲（offscreen buffer），内存占用陡增，滚动时卡顿明显。
优化方向很实际：
真正难的不是写出那行 mix-blend-mode: overlay，而是理解它什么时候在跟谁混合、中间被谁截断、以及混合完的像素是否还符合设计预期。浏览器不会告诉你 blend 失效是因为父元素加了个 backdrop-filter，这种隐式依赖得靠手动拆 layer 验证。
