在 Safari 15.3 及更早版本中调试 background-blend-mode 时，你很可能遇到过这样的困扰：明明已经正确书写了属性声明，浏览器却仿佛视而不见，完全没有任何混合效果。更令人头疼的是，DevTools 中该属性直接显示为灰色，或标记为 invalid，且不提供任何错误提示。这并非常见的降级为 normal 模式，而是整条声明被 Safari 直接忽略。受影响的系统包括 iOS 15 / macOS Monterey 及更早版本，例如初代 iPhone SE 上运行的就是这些系统版本。
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 因缺少第二层背景而完全失效。
正确的写法必须使用单条 background 简写声明：
.box {
background: #ff6b6b, url("pattern.png");
background-blend-mode: overlay;
}多层叠加时 background-origin 和 background-clip 不一致
即使你正确使用了逗号分隔的 background 简写，只要其中某一层设置了 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 实现是更可靠的选择。
