mix-blend-mode在标题上不生效，主因是父容器创建了独立堆叠上下文；需加isolation: isolate、避免opacity
mix-blend-mode 在标题上不生效？检查父容器是否隔离了混合上下文
mix-blend-mode 不是“写了就 blend”，它默认只在**同层堆叠上下文（stacking context）内**生效。标题元素如果被包裹在 position: relative、opacity: 0.99、filter: blur(1px) 或 will-change: transform 的父容器里，就会意外创建新的 stacking context，把混合“关”在内部，无法和背景图/色块互动。
实操建议：
- 给标题的直接父容器加
isolation: isolate—— 这是显式声明“我要让子元素能和更外层混合” - 避免在标题祖先链上使用会触发 stacking context 的属性（尤其注意
opacity小于 1 和filter） - 如果背景是
body上的background-image，确保标题没被中间某层background-color挡住（混合不会穿透纯色背景）
标题文字变透明或消失？mix-blend-mode 值选错了
mix-blend-mode 的值不是装饰开关，每个模式都基于像素级颜色运算。用错值会导致文字完全“吃掉”背景或反向抵消成纯黑/白，看起来像消失了。
常见错误现象：
-
mix-blend-mode: multiply在深色背景上会让浅色文字变暗甚至不可读 -
mix-blend-mode: screen在浅色背景上会让深色文字发灰、对比度崩坏 -
mix-blend-mode: difference极易让文字与背景差值趋近 0，变成近似灰色块
推荐组合（实测稳定）：
- 深色背景 + 浅色标题 →
mix-blend-mode: screen或lighten - 浅色背景 + 深色标题 →
mix-blend-mode: multiply或darken - 想突出纹理感（如标题压在照片上）→
mix-blend-mode: overlay，但务必搭配color为中灰系（如#555），避开纯黑/白
移动端 Safari 混合失效？检查是否触发了硬件加速限制
iOS Safari 对 mix-blend-mode 的支持有隐藏条件：它要求参与混合的元素必须处于**合成层（composited layer）**，而某些情况下（比如没有触发 GPU 加速）会回退到软件渲染，导致混合不工作或闪烁。
实操建议：
- 给标题加
transform: translateZ(0)或will-change: transform强制提升为合成层 - 避免同时对同一元素设置
mix-blend-mode和backdrop-filter（Safari 15.4+ 才稳定支持两者共存） - 真机调试时用 Safari 开发者工具 → Elements 面板右键元素 → “Show Paint Rectangles”，看是否出现绿色合成框；没出现就说明没进合成层
背景图滚动时标题混合错位？mix-blend-mode 不响应 position: sticky
mix-blend-mode 只作用于视觉层叠顺序，不改变文档流。当标题用 position: sticky 固定在视口顶部，而背景图用 background-attachment: fixed 实现视差效果时，两者的“相对位置”在滚动中不断变化——但混合计算仍按初始帧快照进行，造成视觉撕裂或错位。
根本原因：混合发生在 compositor 层，但 fixed 背景的渲染时机和 sticky 元素的合成时机不同步。
可行解法：
- 放弃
background-attachment: fixed，改用transform: translateY()配合 scroll event 或scroll-snap模拟视差（可控性更强） - 若必须用 fixed 背景，把标题从 sticky 改为
position: absolute+ JS 监听scroll动态更新top，确保混合始终基于当前帧像素位置 - 测试时务必在真机滚动慢速拖动，混合错位往往只在非匀速滚动中暴露
混合模式看着简单，实际是 CSS 渲染管线里最依赖上下文的一环。一个 isolation 缺失、一行 opacity 多写、一次 Safari 合成层没触发，就全白搭。调的时候别只盯效果，先查 computed styles 里的 stacking context 和 compositing reason。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
