background-blend-mode 生效需满足两个前提：同一层级至少两个背景项（如渐变+半透明色），且尺寸定位一致；优先用 #rrggbbaa 格式而非 rgba() 以保兼容性。
background-blend-mode 不生效？检查是否满足两个硬性前提
它只对「同一 background 层级」里的多个背景图或背景色起作用，不是给任意元素加个透明色就能叠加的。常见失效场景是：只写了一个 background-color，或者把半透明色写在 background 简写里却漏掉了其他背景项。
- 必须至少有两个背景层：比如
background: linear-gradient(...), #0008;或background: url(img.png), #fff6; - 不能用
background-color单独设置——它不参与 blend，得塞进background复合声明里作为其中一项 - 所有背景层必须使用相同尺寸和定位（
background-size/background-position），否则叠加区域错位，效果不可控
rgba() 和十六进制透明色在 background-blend-mode 中表现不同
十六进制带 alpha（如 #0008）本质是颜色值，而 rgba(0,0,0,0.5) 是函数式写法——两者都合法，但某些旧版 Safari 对 rgba() 在 blend 场景下解析不稳定，建议优先用 #rrggbbaa 格式。
-
#00000080（等价于 50% 透明黑）比rgba(0,0,0,0.5)兼容性更好，尤其在 iOS 15 之前 - 如果用渐变 + 半透明色叠加，确保渐变本身不含透明度（如别写
rgba(255,0,0,0.3)做 stop color），否则会嵌套透明，结果过暗 - Chrome 和 Firefox 对
background-blend-mode: multiply处理一致，但 Safari 可能将screen模式渲染得更亮，需实机验证
常见叠加模式的实际效果与适用场景
别盲目套用 multiply 或 screen，不同模式对明暗对比敏感度差异很大，尤其在深色背景上容易“糊成一片”。
-
background-blend-mode: overlay：保留高光和阴影细节，适合文字容器盖一层柔光底纹 -
background-blend-mode: soft-light：比overlay更温和，适合图片上叠加浅色标题底衬 -
background-blend-mode: exclusion：产生低对比反色效果，小范围调试可用，大面积易导致可读性崩坏 - 避免在
background-blend-mode: darken下叠加两个深色层——结果几乎全黑，且无法通过调 opacity 补救
性能隐患：background-blend-mode 触发合成层但不总被 GPU 加速
它会让浏览器强制创建新的合成层（compositing layer），在滚动频繁或动画中可能引发掉帧，尤其在低端 Android 设备上。
- 开启 Chrome DevTools 的
Rendering > Paint flashing，能看到 blend 区域持续高亮，说明重绘开销大 - 若配合
transform: translateZ(0)强制硬件加速，反而可能因多层合成加剧内存压力 - 真要兼顾效果与性能，不如用伪元素分层实现：主背景用
::before，半透明层用::after并设opacity，再用mix-blend-mode（注意作用域限制）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
