为何CSS背景混合模式background-blend-mode在Safari失效？

Safari 15.3 及更早版本完全忽略 background-blend-mode 声明，非降级为 normal；主因是多层背景未用单条 background 声明书写、各层 background-origin/background-clip 不一致、渐变中混用 rgba() 与 #rrggbbaa 等。

background-blend-mode 在 Safari 15.3 及更早版本被完全忽略

不是降级为 normal，而是整条声明被浏览器跳过——DevTools 里该属性直接灰掉或标为 invalid。iOS 15 / macOS Monterey 及更早系统（包括初代 iPhone SE）都运行 Safari 15.3 或更低版本，此时无论你写多少层背景、用什么 blend 值，效果都为零。

最隐蔽的失效原因：background-color 和 background-image 分开写

这是实际项目中最常踩的坑。Safari（及其他浏览器）只把逗号分隔的同一 background 声明里的内容识别为“多层背景”。一旦拆开：

• background-color: #ff6b6b;
• background-image: url("pattern.png");

→ 浏览器只保留最后一条生效的声明（通常是 background-image），background-blend-mode 因缺少第二层而彻底失效。

正确写法必须是单条声明：

立即学习“前端免费学习笔记（深入）”；

.box {  background: #ff6b6b, url("pattern.png");  background-blend-mode: overlay;}

多层叠加时 background-origin 和 background-clip 不一致

即使你写对了逗号分隔，只要某一层设了 background-origin: border-box，其余层用默认的 padding-box，整个混合就会静默退回到 normal —— 浏览器拒绝计算 origin 不同的图层叠加。

实操建议：

• 所有层统一用 background-origin: padding-box（默认值，可不写）
• 所有层统一用 background-clip: border-box 或 padding-box，不要混用
• 避免给某一层单独加 background-size 或 background-position 而其他层不设，否则尺寸错位导致视觉上“没混合”

渐变颜色用 rgba() 导致旧 Safari 解析失败

在 linear-gradient() 的 color stop 中写 rgba(255,0,0,0.4)，Safari 15.3 及更早版本对嵌套透明解析不稳定，可能整层渐变不渲染或透叠异常。

替代方案：

• 统一用十六进制带 alpha 格式：#ff000044（注意是 8 位，非 #ff000066 这种 6 位）
• 避免在渐变中混用 rgba() 和 #rrggbbaa，保持格式一致
• 若需动态控制，CSS 自定义属性不能直接用于 background-blend-mode 值，它只接受关键字如 multiply

真正落地时，别指望 @supports 检测能兜底——Safari 15.2+ 会返回 true，但渲染仍失效。兼容性要求高时，静态合成图或 Canvas 是更可控的选择。