CSS 中没有 background-composite 属性，它不属于任何标准；正确实现多背景合成应使用 background-image 多值配合 background-blend-mode。
CSS 没有 background-composite 这个属性，它根本不存在于任何浏览器标准或草案中。
为什么搜到“background-composite”却配不出效果
这是最常见的困惑源头：有人把 Canvas 的 globalCompositeOperation、SVG 的 mix-blend-mode 或某些 CSS 预处理器/构建工具的自定义函数名（比如 PostCSS 插件）误当成了原生 CSS 属性。浏览器遇到 background-composite 会直接忽略，DevTools 里连警告都不会报——它就像写了个错别字变量名，静默失效。
- 查 MDN、CanIUse 或 CSSWG 官方文档，均无此属性记录
- Chrome/Firefox/Safari 的 CSS 属性自动补全列表里不出现
background-composite - 若在样式中写了它，用
getComputedStyle(el).backgroundComposite读出来是空字符串或undefined
真正能合成多个背景图的合法方式
CSS 原生只支持用逗号分隔多层 background-image，再配合 background-blend-mode 控制层间混合模式——这才是“背景图合成”的标准解法。
-
background-image可以写多值：url(a.png), url(b.png), linear-gradient(...) - 对应每层的
background-blend-mode也按顺序用逗号分隔，如：multiply, screen, normal - 注意：
background-blend-mode对background-color也生效，且只影响“同一 background-layer 内”的叠加，不是图层间全局混合 - 兼容性：Chrome 35+、Firefox 30+、Safari 7.1+ 支持；IE 完全不支持
div {
background-image: url(overlay.png), url(base.jpg);
background-blend-mode: multiply;
}
想实现类似“遮罩”“裁剪”“Alpha 合成”的替代方案
如果本意是让一张图作为另一张图的蒙版（比如 PNG 透明通道控制底图显隐），background-blend-mode 不够用，得换思路：
立即学习“前端免费学习笔记（深入）”；
- 用
mask-image+mask-mode: luminance（需搭配-webkit-mask兼容 Safari） - 用
clip-path配合 SVG<mask></mask>元素（更可控，但需内联或外链 SVG） - 用
mix-blend-mode作用于两个重叠的<div>，而非背景层（适用场景不同，但视觉效果可能更接近预期） <li>纯前端合成需求强？老实用 Canvas：<code>ctx.globalCompositeOperation = 'destination-in'
真正卡住人的地方，往往不是“怎么写对”，而是先花了半小时调试一个根本不存在的属性名。确认是否拼错、是否混淆了 Canvas/SVG/CSS 边界，比猛查语法更快解决问题。
