CSS背景图的合成操作_使用background-composite

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 边界，比猛查语法更快解决问题。