mix-blend-mode 无法直接过渡，因其为离散枚举值，浏览器不支持插值动画；transition 声明会被静默忽略；可用 opacity 过渡配合 mix-blend-mode 实现视觉渐变效果。
transition 不能直接过渡 mix-blend-mode
mix-blend-mode 是离散的混合模式枚举值（如 multiply、screen、overlay），浏览器不支持在不同 blend mode 之间做插值动画，所以写 transition: mix-blend-mode 0.3s 完全无效，开发者常误以为是写法错，其实是规范限制。
- 浏览器会静默忽略该 transition 声明，控制台无报错，但动画不触发
- 只有
opacity、transform、filter等连续可插值属性才能被transition或@keyframes驱动 - 若需“切换混合效果”，只能靠 JS 控制 class 切换 + CSS 过渡其他可动画属性来间接营造变化感
用 opacity + mix-blend-mode 组合模拟渐变叠加
真正能动的是 opacity：把要叠加的图层设为 mix-blend-mode: multiply，再对其 opacity 做过渡，视觉上就能看到色彩层层渗入的效果——这不是 blend mode 在变，而是图层透明度在变，底层颜色透过它“透出来”的量在变。
- 适用场景：背景色块渐进覆盖文字、图片局部着色、UI 状态高亮浮现
- 注意层级：必须确保该元素与下方内容存在堆叠上下文（比如父容器没设
isolation: isolate就可能被裁剪或失效） - 性能友好：opacity 是合成层属性，GPU 加速，不会触发布局重排
/* 示例：半透明色块叠加文字，实现“染色浮现” */
.overlay {
background: #ff6b6b;
mix-blend-mode: multiply;
opacity: 0;
transition: opacity 0.4s ease-out;
}
.overlay.active {
opacity: 0.7;
}mix-blend-mode 在 SVG 和 Canvas 中的行为差异
同一个 multiply 在 HTML 元素、SVG <rect></rect>、Canvas ctx.globalCompositeOperation 中结果可能不一致——不是 bug，是坐标系、预乘 Alpha、像素采样方式不同导致的。
- HTML/CSS 的 mix-blend-mode 基于 sRGB，且受
color-interpolation-filters: sRGB影响；SVG 默认用线性 RGB，需显式声明color-interpolation="sRGB" - Canvas 的
globalCompositeOperation = 'multiply'不处理颜色空间转换，直接按字节计算，常显得更“暗” - 跨技术栈对齐效果时，优先统一用 CSS 实现，避免在 SVG/Canvas 里硬套相同 blend mode 名称
移动端 Safari 对 mix-blend-mode 的兼容陷阱
iOS 15.4 之前，Safari 对 mix-blend-mode 在 position: fixed / sticky 元素、overflow: hidden 容器内、或开启硬件加速（transform: translateZ(0)）的节点上，存在渲染撕裂或完全不生效的问题。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：页面滚动时叠加区域突然消失，或首次加载正常、刷新后失效
- 规避方式：避免在
position: fixed的导航栏/浮层上直接用 mix-blend-mode；改用background-blend-mode处理多背景叠加更稳妥 - 检测手段：用
@supports (mix-blend-mode: multiply)包裹样式，并准备降级色值（如 fallback 用半透明白色遮罩）
实际效果是否自然，取决于你有没有让底层内容“准备好被混合”——比如纯白背景上用 screen 几乎看不见，而深灰底+multiply 才有明显压暗。别只调 blend mode，先看底色和叠层的明度关系。
