mix-blend-mode 不接受 hex 值直接参与计算，仅作用于元素内容与背后真实像素的混合；所谓“hex颜色混合”实为以 hex 定义的背景或文字色作为混合色，在满足图层结构和混合上下文成立的前提下生效。
mix-blend-mode 本身不接受 HEX 颜色值参与计算，它只作用于元素内容与背后真实像素的混合；所谓“HEX颜色混合”，本质是用 HEX 定义的背景色或文字色，作为混合色（blend color）参与运算——关键不在颜色格式，而在图层结构和混合上下文是否成立。
mix-blend-mode 设了没反应？先检查这三个硬性条件
这是最常卡住人的地方：不是代码写错，而是混合根本没启动。
-
mix-blend-mode只对「当前元素的内容」和「它正后方渲染出的真实像素」生效——背后要是透明、空父容器、或被transform/filter切断层叠上下文，就等于对着空气混合 - 元素必须有可渲染内容：
<img>、带文字的<h1></h1>、含content的伪元素都行；纯<div style="max-width:90%"></div>不算，它没有“内容”，只有背景 - 背后必须存在非透明像素：可以是父级的
background-color、兄弟元素、body的背景，但注意——background-image本身不参与混合（除非你把它转成background多层中的一层）
双重曝光效果必须用 mix-blend-mode？background-blend-mode 更稳
如果你的目标是“一张图 + 一层颜色”叠加出胶片感，background-blend-mode 比 mix-blend-mode 更直接、兼容性更好、也更少踩坑。
-
background-blend-mode专为同一元素的多背景层设计，比如把一张照片和一个linear-gradient(#000, #000)（等效于 HEX 色）叠在一起 - 写法必须是单个
background声明里包含所有图层：background: linear-gradient(#ff6b6b, #ff6b6b), url("photo.jpg"); background-blend-mode: multiply;——background-color和background-image分开写会失效 - 图层顺序决定混合方向：颜色层写在前面（上层），
multiply会让图片变暗；图片写在前面，则颜色层会被透出的图像纹理影响
mix-blend-mode 中 multiply / screen / overlay 的实际视觉差异
别被名字误导，它们是固定数学公式，不是调色盘选色。用 HEX 定义的混合色（比如 color: #ff6b6b）传进去，结果由公式决定：
-
multiply：每个通道做乘法（R × Rback），结果一定比两者都暗；适合深色文字压浅图，或去白留黑（纯白区域完全透明） -
screen：1 − (1−R) × (1−Rback)，结果一定比两者都亮；适合高光/霓虹叠加，但底图稍亮就容易发灰，建议配合opacity: 0.6控制强度 -
overlay：按基色亮度分支处理——暗区走multiply，亮区走screen；对比度提升最猛，标题压图时聚焦强，但会放大低分辨率图的噪点
iOS 和低端 Android 上混合动画突然失效？绕开动态切换
在 iOS 14–15 或千元安卓机上，@keyframes 里动态改 mix-blend-mode 值大概率卡顿、闪烁甚至黑屏。
- 绝对不要在动画中切换
mix-blend-mode值；改为固定模式（如overlay），再通过opacity、background-color或filter: brightness()实现渐变效果 - 禁止给混合元素加
will-change: transform——它强制创建独立合成层，彻底切断混合链路 - 降级检测别只靠
@supports (mix-blend-mode: difference)；iOS 7–8 会误报支持，更稳妥的是：@supports (mix-blend-mode: difference) and (not (-webkit-appearance: none))
真正难的不是写对那行 mix-blend-mode: overlay，而是确保它背后真有像素、上下文没被意外切断、移动端不会在用户滑动时突然变灰——这些细节藏在 DOM 结构和层叠规则里，而不是 CSS 手册里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
