mix-blend-mode 在 Grid 中效果不可控，因它混合整个元素与背后堆叠上下文，易致文字发灰、卡顿；真正需求多为局部叠加，应优先用 background-blend-mode 配合多层背景。
mix-blend-mode 在 Grid 元素上能生效，但效果常不可控——它不混合“网格项之间”，而是让整个元素和它背后的堆叠上下文（包括父容器背景、兄弟元素、甚至 body）混合。直接加在 .grid-container 或某个 .grid-item 上，极易导致文字发灰、按钮变透明、滚动掉帧。
mix-blend-mode 为什么在 Grid 容器里看起来“没反应”
常见错误现象：mix-blend-mode: screen 写了，但页面视觉毫无变化，或只在局部闪一下就恢复。
- Grid 容器默认没有「背后内容」可混：如果
.grid-container是页面最外层，它背后只有<body>的纯色背景，screen混合后几乎看不出差异 - 浏览器静默降级：Safari 15.4 之前完全忽略该属性，连带整条
background声明都可能被丢弃（尤其当和background-blend-mode混用时） - z-index 和堆叠上下文干扰：如果父容器设了
transform或opacity < 1，会创建新层叠上下文，mix-blend-mode只跟这个新上下文内“底下”的内容混合，而不是整个页面
想让 Grid 里的某张图和底色融合？别用 mix-blend-mode
典型误用场景：给一张海报图所在的 .card 加 mix-blend-mode: multiply，结果卡片里的标题、按钮全被一起混合，颜色失真。
- 正确做法：把图和底色写进同一个元素的
background层，用background-blend-mode - 示例：
.card { background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(cover.jpg); background-blend-mode: overlay; } - 这样混合只发生在该元素自己的多层背景之间，不影响子元素，也无需担心堆叠上下文
真要用 mix-blend-mode，必须控制它的混合范围
它本质是“穿透式”混合，不是局部修饰。要让它安全可用，得主动约束作用域：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素显式设置
isolation: isolate，防止它和父级意外混合 - 确保它背后只有你预期的内容：比如把
.blend-target放在一个带background-color的.blend-scope容器里，且该容器不透出其他元素 - 避免在滚动容器内使用：iOS Safari 和部分 Android WebView 中，
mix-blend-mode触发额外合成层，滑动时明显卡顿 - 不要和
transform动画共用：哪怕只是scale(1.01)，也会让浏览器放弃硬件加速，转为 CPU 渲染混合像素
真正容易被忽略的一点：mix-blend-mode 的生效依赖「背后有东西可混」，而 Grid 本身不提供那个「背后」——它只是排列子元素。你要的往往不是“混合”，而是“局部视觉叠加”，这时候 background-blend-mode + 多层背景才是更轻、更稳、更可控的选择。
