background-blend-mode 在 safari 15.4 之前完全不支持；chrome/firefox 支持较早但仅对 background-image + background-color 或多图层生效，单独图片加纯色背景最稳定。
background-blend-mode 在哪些浏览器里根本不起作用
它在 Safari 15.4 之前版本（含 iOS 15.4）完全不支持，连 background-blend-mode: normal 都会被忽略；Chrome 和 Firefox 支持较早，但只对 background-image + background-color 或多个图片层生效，单独一个图片加纯色背景才最稳。
常见错误现象：background-blend-mode: multiply 写了但视觉毫无变化——先检查是否用了多个 background-image（比如渐变叠图片），再确认有没有显式声明 background-color。没颜色层，混合就“没东西可混”。
- 只支持：CSS 渐变、
url()图片、background-color - 不支持：SVG 的
<image></image>元素、Canvas 绘制内容、伪元素的content生成图 - 兼容性兜底建议：用
@supports (background-blend-mode: multiply)包裹，否则老 Safari 会静默丢弃整条 background 声明
mix-blend-mode 和 background-blend-mode 别混用
mix-blend-mode 是元素级混合，影响的是该元素和它背后所有内容（包括父容器、兄弟节点、页面背景）的叠加关系；background-blend-mode 只管自己这个元素的多层背景之间怎么混——范围小、可控性强，也更轻量。
典型误用场景：想让一张海报图和背后的半透明色块融合，却给图片元素加了 mix-blend-mode: screen，结果整个卡片内容（文字、按钮）也被一起混合，画面发虚或变色。
立即学习“前端免费学习笔记（深入）”；
- 要局部融合背景 → 用
background-blend-mode，把图和色写进同一元素的background - 要让元素“透出底下内容” → 才考虑
mix-blend-mode，但得确保 z-index 和堆叠上下文不干扰 -
mix-blend-mode在滚动时可能触发额外合成层，iOS 上容易掉帧；background-blend-mode没这问题
background-blend-mode 的性能陷阱：别在动画里改它
虽然它本身不触发布局（Layout），但每次修改都会强制重绘整个背景区域，在中低端 Android 或旧 iPad 上，配合 transform 动画一起用，帧率会断崖下跌。
错误示范：@keyframes fade-in { to { background-blend-mode: overlay; } } —— 浏览器无法硬件加速这个属性，每一帧都在 CPU 上做像素混合。
- 安全做法：把 blend mode 当作静态视觉设定，初始化时写死，不要进动画关键帧
- 想实现类似“渐变穿透感增强”的动效？改
background-color透明度或渐变色标位置，它们可 GPU 加速 - 调试时打开 Chrome DevTools 的 “Rendering > FPS Meter”，看到红色抖动基本就是 blend mode 被高频重算
常见 blend mode 效果差异和选型建议
multiply 让深色更暗、浅色不变，适合图+深色背景；screen 相反，提亮为主，适合图+浅色背景；overlay 是两者的条件分支，保留对比度，但容易让中间灰变脏——不是万能“高级感”开关。
真实项目里踩过最多坑的是 color-dodge 和 luminosity：前者对输入值极敏感，稍有噪点就炸成光斑；后者在不同设备上灰阶映射不一致，设计师在 MacBook Pro 上调好的效果，到 Windows 笔记本上看就偏黄。
- 稳妥组合：图 +
background-color: rgba(0,0,0,0.3)+background-blend-mode: multiply - 慎用组合：
linear-gradient(to right, #ff0000, #0000ff)和图片用hard-light—— 渐变色域太宽，混合后色边难控 - 调试技巧：临时加
background-color: hotpink看是否被 blend 影响，能快速定位是不是 background 层级写错了顺序
真正难的不是调出某个效果，而是让同一个 background-blend-mode 值在不同图片亮度、不同系统色域下保持可预期的视觉权重——这得靠设计侧给定基准图，前端再做针对性适配，没法一劳永逸。
