mix-blend-mode 必须配合 position: absolute 或 fixed 才能叠加滤镜，因为它仅对视觉重叠的兄弟元素生效；普通文档流中块级元素默认上下排列无重叠，需脱离流并设置父容器为 relative 以准确定位，z-index 仅控制层序而不影响混合本身。
mix-blend-mode 为什么必须配合 position: absolute 或 fixed 才能叠加滤镜？
因为 mix-blend-mode 只对「重叠的兄弟元素」生效，而普通文档流中的块级元素默认不重叠。如果你把两个 div 挨着写，它们上下排列，视觉上没交叠，mix-blend-mode 就完全不起作用。
必须让至少一个元素脱离文档流，用 position: absolute 或 position: fixed 叠在另一个上面。父容器还得设 position: relative 作为定位上下文，否则 absolute 元素会相对于 viewport 定位，容易跑偏。
- 父容器不加
position: relative→ 子元素top/left基准错乱 - 两个元素都用
static（默认）→ 零重叠 →mix-blend-mode彻底无效 - 用
z-index控制谁在上层，但 blend 效果只取决于是否重叠，和 z-index 顺序无关
哪些 blend mode 适合模拟常见滤镜效果？
mix-blend-mode 不是 CSS filter，它做的是像素级混合，所以不能直接替代 filter: blur() 或 grayscale()，但可以模拟部分胶片感、光晕、褪色等视觉叠加效果。常用且实用的有：
-
multiply：暗化底层，适合模拟阴影、旧纸质感（如叠加一张半透明棕黄纹理图） -
screen：提亮底层，适合模拟泛光、柔焦高光（比如白色径向渐变 + screen） -
overlay：保留对比度，比 multiply/screen 更平衡，常用于文字压图时增强可读性 -
color-dodge：极端提亮，慎用——稍一过量就发白失真，仅适合局部光斑强化
注意：color 和 luminosity 这类 HSL 模式对纯色块几乎没反应，必须用带细节/渐变的图像才看得出效果。
实际叠加时图片加载顺序和 opacity 会影响 blend 吗？
会，而且影响很直接。浏览器按 DOM 顺序逐层绘制，blend 是「后绘制的元素」与「已绘制的背景（含下层兄弟）」混合。所以：
- DOM 顺序决定混合方向：后写的元素是 blend 主体，前写的元素是被 blend 的背景
-
opacity会参与混合计算——哪怕你只给上层设opacity: 0.8，它和底层混合的结果就和opacity: 1完全不同 - 图片未加载完成时，
<img>占位空白，blend 会拿空白区域混合，导致闪动或异常色块；建议用background-image+background-blend-mode更稳，或监听load后再添加 class 触发 blend
示例结构：
<div class="container"> <div class="bg"></div> <div class="overlay" style="mix-blend-mode: multiply;"></div> </div>
这里 .overlay 混合的是 .bg（以及它背后的内容），不是反过来。
移动端和 Safari 的兼容性坑怎么绕？
mix-blend-mode 在 iOS 16.4+ 和 Safari 16.4+ 才支持 screen/multiply 等主流模式；更早版本（尤其是 iOS 15.x）要么不支持，要么只支持 normal 和 unset。最稳妥的做法是：
- 用
@supports (mix-blend-mode: multiply)包裹样式，避免降级失效 - 不要依赖它做核心功能（比如文字可读性），而是作为视觉增强层；主内容必须在无 blend 下也清晰
- Safari 对
position: sticky+mix-blend-mode组合有渲染 bug，滚动时可能错位或闪烁，一律改用absolute - WebGL 或 Canvas 滤镜方案（如 three.js / p5.js）在复杂叠加场景下更可控，但代价是 JS 介入和性能开销
真正难的不是写法，是判断什么时候该用 blend、什么时候该切回 filter 或 SVG 滤镜——比如需要模糊边缘，mix-blend-mode 无能为力，必须回到 backdrop-filter 或 filter: blur()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
