如何使用CSS3属性mix-blend-mode实现图层混合-css教程-PHP中文网

mix-blend-mode生效需同时满足三条件：元素与背后内容视觉重叠、同属一个层叠上下文、背后有可混合内容；否则加了也无效，如父容器设opacity: 0.99或用background-image却未合并声明。

如何使用css3属性mix-blend-mode实现图层混合

mix-blend-mode 不是“给元素上色”的开关，它只在元素与背后内容**真实重叠且同属一个层叠上下文**时才起作用；直接加在或文字上没反应，八成是混合前提没满足。

三个硬性条件缺一不可：

元素必须和背后的“底物”（父容器背景、兄弟元素、body 背景色）存在视觉重叠 —— 比如没设 position: relative 或 z-index，文字可能根本没盖在图片上
混合元素和底物必须在**同一个层叠上下文**里 —— 父容器用了 isolation: isolate、transform、opacity: 0.99 等都会悄悄切断混合链
背后必须有可混合的内容 —— 默认下面只有纯白或透明，没东西可混；background-image 本身不参与 mix-blend-mode，得换 background-blend-mode

常见翻车点：div { opacity: 0.99; } > img { mix-blend-mode: multiply; } → 父容器已创建新 stacking context，混合失效。

关键不是调图片本身，而是构造出它能“混”的环境：

把放进一个带背景色/渐变的容器里，比如 div { background: linear-gradient(to right, #ff0000, #0000ff); }
用伪元素叠加调色层：div::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(255, 0, 100, 0.6); mix-blend-mode: multiply; z-index: 1; }
确保图片和伪元素都设 position: absolute 或 relative，且没有父级触发隔离
Chrome DevTools → Rendering → 勾选 “Paint flashing”，看是否真有重叠绘制区域

别用 background-image 替代后还硬套 mix-blend-mode —— 那是 background-blend-mode 的地盘。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

名字容易误导，实际表现取决于基色（背后）和混合色（当前）的数值关系：

multiply：逐通道相乘，深色吃色强，浅色几乎不变 → 适合压暗高光、叠加阴影色块
screen：等价于“去黑留亮”，纯黑区域完全透明 → 实现文字镂空透出视频背景最稳，文字颜色必须设 #000
difference：亮区反色，暗区保留原色 → 最适合文本跨黑白渐变背景时自动翻色，比如 h1 { color: #fff; mix-blend-mode: difference; }

半透明元素参与混合时，会先合成自身 alpha，再算混合值，结果常比预期更灰 —— 若需精准控制，优先用不透明色+调节 opacity 替代。

iOS 14–15 是重灾区，动画中切 mix-blend-mode 值大概率失效：

绝对不要在 @keyframes 里动态改 mix-blend-mode —— 改用固定模式 + 动态调 background-color 或 opacity
避免给混合元素加 will-change: transform，它会强制创建新图层，中断混合
移动端做镂空文字时，必须加 will-change: transform 到父容器（不是文字本身），并设 pointer-events: none 防交互遮挡
千元安卓机可能掉帧或闪烁，上线前务必在真机测试