怎么在HTML中通过CSS mask-composite控制多个遮罩层的叠加方式-html教程-PHP中文网

mask-composite 支持 add、subtract、intersect、exclude 四种合成模式，分别对应并集、裁切、交集和异或运算；仅多层 mask-image 下生效，chrome/edge 111+、firefox 125+ 原生支持，safari 需 -webkit- 前缀且兼容性有限。

怎么在html中通过css mask-composite控制多个遮罩层的叠加方式

mask-composite 支持哪些合成模式

mask-composite 用于控制多个 mask-image（用逗号分隔）之间的 alpha 通道如何运算，它不是“叠加颜色”，而是对遮罩的透明区域做布尔逻辑处理。目前稳定支持的值只有四个：add、subtract、intersect、exclude。

其中 add 是默认行为（不写也生效），相当于“取并集”：所有遮罩层的不透明区域都保留显示；subtract 是最常用的手动裁切方式，即“用第二层遮掉第一层”；intersect 只保留重叠部分；exclude 则是“异或”，重叠区域反向隐藏。

浏览器兼容性上，Chrome / Edge 111+、Firefox 125+ 原生支持，Safari 目前仍需 -webkit-mask-composite 且仅部分支持（如 subtract 可用，exclude 无效）
必须配合多层 mask-image 使用，单层时该属性无意义
不能和 mask-mode: luminance 混用——亮度模式下合成逻辑不可控，容易失效

为什么写了 mask-composite 却没效果

常见原因是漏掉了配套的 mask 子属性声明，导致浏览器降级为单层遮罩或直接忽略合成逻辑。

每层 mask-image 必须有对应数量的 mask-repeat、mask-position、mask-size 值（用逗号分隔），否则浏览器会截断或报错
Safari 要求显式写 -webkit-mask-composite，且必须和 -webkit-mask-image 同时存在，否则静默忽略
如果用了 url() 遮罩图但图片本身不含 alpha 通道（比如纯白 PNG），那无论怎么设 subtract 都不会“减”出洞——遮罩依赖的是图像自身的透明度，不是颜色值
mask-origin 默认是 border-box，若容器有 padding/border，遮罩可能错位，建议统一设为 content-box

用 subtract 实现「镂空文字」的最小可行代码

这是最典型的 mask-composite: subtract 场景：先铺一层实色遮罩（如渐变），再用文字 SVG 或文本遮罩“挖空”中间区域。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

div.text-cutout {
  background: linear-gradient(45deg, #3498db, #e74c3c);
  -webkit-mask-image: 
    linear-gradient(#000 0 0), 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='48' fill='%23000'%3EHELLO%3C/text%3E%3C/svg%3E");
  mask-image: 
    linear-gradient(#000 0 0), 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-size='48' fill='%23000'%3EHELLO%3C/text%3E%3C/svg%3E");
  -webkit-mask-composite: subtract;
  mask-composite: subtract;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  mask-position: center, center;
}

注意：SVG 中文字 fill="#000" 是关键——黑色代表“显示”，透明背景才是“挖空”区域；如果填了 white，在 Safari 下可能完全不显示。