mix-blend-mode 是像素级图层混合，非颜色计算函数；生效需满足重叠、叠层上下文完整、背景非透明三前提；实际表现受srgb线性计算影响，与photoshop有差异；移动端兼容性差，禁用动画中切换及will-change；性能开销大。
mix-blend-mode 不是颜色函数，它和 color-mix()、hsl() 等完全不在同一层——前者是渲染时的像素级图层混合，后者是声明时的颜色值计算。想用 CSS 模拟 Photoshop 混合模式，必须用 mix-blend-mode，别指望靠颜色函数“算出来”一个等效色。
mix-blend-mode 生效的三个硬性前提
设了 mix-blend-mode: multiply 却没反应？不是浏览器 bug，大概率是以下任一条件不满足：
- 元素和背后内容没有视觉重叠：比如
<p></p>在文档流里自然排列，没设position: relative或z-index，就可能根本没盖在目标背景上 - 层叠上下文被意外切断：父容器用了
transform、filter、opacity: 0.99或isolation: isolate，子元素就只能跟这个新 context 的“空背景”混合 - 背后没有可混合的内容：
background-image不参与混合；::before无内容或透明也不行；body 没设background-color，整个 backdrop 就是透明黑（即全 0），多数模式下结果不可见
multiply / screen / overlay 在网页中实际表现差异
名字像 Photoshop ≠ 行为一致。浏览器按 sRGB 线性计算，且不处理 Alpha 预乘，所以暗部压缩、亮部过曝是常态：
-
multiply：深灰变纯黑很彻底，适合压文字在浅图上，但原图含白色细节（如 logo 边框）会消失 -
screen：稍亮的底图就发灰，建议搭配opacity: 0.6–0.8控制强度，别直接怼满 -
overlay：对中间调增强猛，但低分辨率图会放大噪点；纯色块上容易过曝，不如先用darken或lighten试探
移动端 Safari 和低端 Android 的兼容性陷阱
iOS 14–15 是重灾区：动画中 mix-blend-mode 突然失效、will-change: transform 导致混合层跳变、某些 GPU 配置下直接禁用。Android Chrome 好些，但千元机仍可能掉帧或闪烁：
- 绝对不要在
@keyframes里动态切换mix-blend-mode值——改用固定模式 + 动态调background-color或opacity - 混合元素上禁止加
will-change: transform，它会强制创建独立合成层，彻底断开混合链 - 降级方案别只写
@supports (mix-blend-mode: multiply)，得配真实 fallback 样式（比如用filter: contrast(1.2)模拟overlay的对比度提升）
mix-blend-mode 和 background-blend-mode 别混用
mix-blend-mode 是元素之间混合，background-blend-mode 是单个元素内多个背景图/渐变之间的混合。两者阶段不同、作用域不同：
- 想让文字和图片融合？用
mix-blend-mode，把文字和<img>拆成两个兄弟元素，确保同层叠上下文 - 想给一张 JPG 叠一层渐变色并 blend？用
background-blend-mode: lighten，写在同一个div上：background-image: url(a.jpg), linear-gradient(red, red) - 混用
color-mix(in srgb, var(--bg), white 70%)和mix-blend-mode不会得到“响应式混合效果”，前者输出固定色值，后者依赖实时渲染堆叠
最常被忽略的一点：性能。只要任一参与 mix-blend-mode 的元素位置或尺寸变化（哪怕只是 top: 1px），整个混合区域都会被当作脏区重绘，比 transform 慢一个数量级。滚动卡顿、动画掉帧，往往就栽在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
