background-blend-mode 在 safari 15.4 前不支持，chrome 35+ 仅支持 background-image 与 background-color 混合；多图或渐变时静默失效，firefox 支持最稳但 android webview 基本不支持；@supports 检测不可靠；canvas 可替代但需处理跨域、缩放、性能等问题；静态合成图是兼容性最佳降级方案。
background-blend-mode 在 Safari 和旧版 Chrome 里不生效
不是你写错了，是浏览器真没实现全。CSS background-blend-mode 在 Safari 15.4 之前完全不支持，Chrome 从 35 开始支持但仅限于 background-image + background-color 组合，遇到多图叠加或渐变混合就静默失败——连 warning 都不抛。
- 用
background: linear-gradient(45deg, #ff0000, #00ff00), url(cover.jpg); background-blend-mode: multiply;测试时，Safari 会直接忽略 blend 模式，只显示最上层图 - Firefox 支持最稳，但 Android WebView（尤其 UC、QQ 内核）基本当没这属性
- 别依赖
@supports (background-blend-mode: multiply)做降级——它在 Safari 15.2+ 返回true，实际渲染仍失效
Canvas drawImage + globalCompositeOperation 替代方案可行但有坑
Canvas 能精确控制图层混合，globalCompositeOperation = 'multiply' 效果和 CSS 一致，但必须自己管理图像加载、缩放、定位，且无法响应式重绘。
- 图片跨域时
canvas.toDataURL()会报SecurityError: The canvas has been tainted by cross-origin data，必须服务端加CORS头或用img.crossOrigin = 'anonymous' -
drawImage()对 SVG 或高 DPI 图片缩放易糊，得手动计算devicePixelRatio并调用ctx.scale() - 动画场景下每帧重绘 Canvas 性能比 CSS 差很多，尤其是移动端，
requestAnimationFrame中频繁clearRect()+drawImage()容易掉帧
静态图覆盖是最稳妥的“降级”方案
如果混合效果只是装饰性（比如 banner 背景渐变压图），直接出一张 PNG/JPEG 合成图，用 background-image 引入，兼容性 100%，加载也更快。
- 用 Figma / Photoshop 导出时注意保留 Alpha 通道，避免 PNG 在 IE8 下透明失效
- 响应式场景需按断点导出多尺寸图（
1x/2x），否则高清屏上模糊 - 别用
picture+source切换——CSS 背景图不支持响应式 srcset，得靠 JS 动态改style.backgroundImage
混合模式复杂时 Canvas 仍是唯一选择
比如要实时拖拽图层、调整 opacity、切换 blend mode 类型，或者叠加 >2 层动态内容，CSS 没法做，Canvas 是事实标准。但得接受它没法继承父容器 transform、不能被 CSS 动画驱动、打印时可能空白这些硬限制。
- Canvas 内容不会随
window.print()输出，需额外生成data:image/png插入 DOM 打印 - 混合多张图时，
globalCompositeOperation只影响后续绘制，顺序错一点结果就全偏——先画底图，再设'overlay'，最后画上层图 - WebGL 更快，但引入 Three.js 就过度了；纯 2D Canvas 已够用，别提前优化
真正麻烦的不是选 Canvas 还是 CSS，而是混合逻辑一旦涉及用户交互或动态数据，就得全程自己管像素——浏览器不帮你算 blend 结果，连 multiply 都得手写公式校验边界值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
