mix-blend-mode不能直接用纯色关键字“当滤镜”，它只定义当前元素像素如何与正下方像素混合；需构造重叠结构，父容器设position: relative并含可见底层内容，纯色层用absolute覆盖，伪元素或兄弟div实现，避免background-color直接使用。
mix-blend-mode 不能直接用纯色关键字“当滤镜”
它不是滤镜，不改变自身颜色值；mix-blend-mode只定义当前元素像素如何与它正下方的像素混合。写div { background: red; mix-blend-mode: multiply; }不会让这个红块变暗——它只会尝试和父容器里“它下面那层”的内容做乘法运算。如果父容器没背景、没子元素、或用了transform意外建了隔离层，结果就是红块原样显示，或整块发黑/发白。
想靠纯色+mix-blend-mode出效果，必须构造重叠结构
纯色本身没细节，但和图片、渐变、文字等有明暗变化的内容叠加时，multiply、screen、overlay才能显效。关键在“谁在上、谁在下、有没有东西可混”：
- 父容器必须有可见内容（比如
background-image或一张img）作为“底层” - 纯色层要用
position: absolute盖上去，不能靠文档流自然堆叠 - 父容器得设
position: relative，否则absolute纯色层会飞到 viewport 顶部左上角 - 别用
background-color: red直接写在图片上——mix-blend-mode对background无效，得用伪元素或兄弟div
常用纯色关键字搭配模式的实际表现
用red、blue、rgba(255, 0, 100, 0.6)这类值时，混合效果高度依赖底层明暗分布：
-
multiply+red：压暗底层，红色区域越暗越明显，适合模拟胶片阴影或旧纸底纹 -
screen+white：提亮底层，但纯白+screen几乎无变化，得用rgba(255, 255, 255, 0.7)才有效果 -
overlay+blue：保留对比度，蓝调偏冷，适合封面标题压图，比multiply更不易吃掉文字细节 -
color-dodge慎用：哪怕rgba(255, 200, 0, 0.3)都可能让局部过曝成一片死白，尤其在 Safari 中渲染不稳定
移动端真机上纯色混合常失效的三个静默原因
代码看着没错，但在 iOS Safari 或安卓 Chrome 真机里“突然没反应”，大概率不是语法问题，而是渲染上下文被切断：
立即学习“前端免费学习笔记（深入）”；
- 父容器加了
transform: translateZ(0)或opacity: 0.99→ 自动创建新 stacking context，纯色层只能跟它的透明背景混 - 外层用了
isolation: isolate但没配position: relative→ 混合范围被锁死，且无法向下穿透 - 图片是
<img alt="如何在CSS中使用纯色关键字配合mix-blend-mode实现滤镜" >标签，但父容器没设明确宽高或display: block→ 图片加载后重排导致定位错乱，纯色层脱靶
最简验证法：给父容器临时加background: #ff0，如果纯色层立刻显色，说明混合通路是通的，问题出在底层内容缺失或隔离干扰上。
