语法
/* Keyword values */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;
/* Global values */
mask-composite: inherit;
mask-composite: initial;
mask-composite: revert;
mask-composite: revert-layer;
mask-composite: unset;
值
该属性接受一个逗号分隔的 <compositing-operator> 关键字值列表，每个值代表一个 Porter-Duff 合成运算符，它定义了当前遮罩层与其下方遮罩层之间使用的合成操作，包括：
add (添加)-
关联的遮罩图像放置在所有下方的遮罩层之上（应用相应的合成运算符）。这是默认值。
subtract (减去)-
关联的遮罩图像放置在其超出所有下方的遮罩层（应用相应的合成运算符）的区域。
intersect (交集)-
关联遮罩图像与所有下方合成遮罩层重叠的部分替换了之前合成的层。
exclude (排除)-
关联遮罩图像和下方遮罩层的非重叠区域，在应用了相应的合成运算符后，进行组合。
描述
当一个元素应用了多个遮罩层时，mask-composite 属性可以用于定义多个遮罩如何相互作用，或者如何组合，以创建最终的遮罩效果。
层的数量由 mask-image 属性值中逗号分隔值的数量决定（即使某个值为 none）。逗号分隔值列表中的每个 mask-composite 值按顺序与一个 mask-image 值匹配。如果 mask-composite 中的值数量等于或大于 mask-image 值的数量，则多余的值将被忽略。如果 mask-composite 属性没有足够的逗号分隔值来匹配层的数量，则该值列表将重复直到数量足够。
在处理过程中，源层（即当前或关联的遮罩层图像）被添加到（默认）、从目标层中减去、与目标层相交，或从目标层中排除。目标层是源层下方的遮罩层，并应用了相应的合成运算符；这包括所有以前的层，按逗号分隔遮罩列表中的出现顺序合成。当前遮罩层下方的所有遮罩层都必须在应用当前遮罩层的合成操作之前进行合成。遮罩层图像在通过定义的合成值组合之前，会被转换为 alpha 遮罩进行处理。
应用于任何元素或伪元素的多个遮罩层，其行为就像它们被渲染到一个隔离组中一样。换句话说，遮罩层与其它遮罩层合成，而不是与元素的内容或元素后面的内容合成。
正式定义
正式语法
mask-composite =
<compositing-operator>#
<compositing-operator> =
add |
subtract |
intersect |
exclude
示例
基本用法
此示例演示了 mask-composite 属性的基本用法。
HTML
我们包含一个 HTML <div> 元素，然后我们将对其进行样式设置。
<div></div>
CSS
我们为 <div> 提供大小和颜色，然后添加两个 mask-image，并使用 mask-size 属性使其大小与它们所遮罩的元素匹配。最后，我们将 mask-composite 属性设置为 subtract，从而从第一个遮罩图像中减去第二个遮罩图像。
div {
width: 100px;
height: 100px;
background-color: red;
mask-image:
url("https://mdn.github.io/shared-assets/images/examples/mdn.svg"),
url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
mask-size: 100% 100%;
mask-composite: subtract;
}
结果
值比较
此示例演示了 mask-composite 属性的四个 <compositing-operator> 关键字值，并比较了 alpha 和 luminance 遮罩模式的效果。
HTML
我们有一个包含八张图片的 <table>。为简洁起见，<table> 已隐藏。
<img
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
还有一个包含 4 个遮罩的 SVG；一个 alpha 心形和圆形，以及一个亮度心形和圆形。心形遮罩使用纯色定义。圆形遮罩使用半透明的白色和黑色 stroke 和 fill 颜色创建。
<svg height="0" width="0">
<mask id="heartAlpha" class="alpha">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="green"
stroke="white"
stroke-width="20" />
</mask>
<mask id="circleAlpha" class="alpha">
<circle
cx="130"
cy="130"
r="50"
fill="rgb(0 0 0 / 0.5)"
stroke="rgb(255 255 255 / 0.5)"
stroke-width="20" />
</mask>
<mask id="heartLuminance" class="luminance">
<path
d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
fill="green"
stroke="white"
stroke-width="20" />
</mask>
<mask id="circleLuminance" class="luminance">
<circle
cx="130"
cy="130"
r="50"
fill="rgb(0 0 0 / 0.5)"
stroke="rgb(255 255 255 / 0.5)"
stroke-width="20" />
</mask>
</svg>
CSS
首先，我们为 <mask> 元素设置样式，为每个遮罩提供 alpha 或 luminance 的 mask-type 属性值。
mask.luminance {
mask-type: luminance;
}
mask.alpha {
mask-type: alpha;
}
然后，我们将心形和圆形遮罩作为逗号分隔的 mask-image 属性值应用。这些应用于每个 <img> 元素，同一行中的所有图像都获得相同的遮罩。
/* apply the mask images */
tr.alphaMaskType img {
mask-image: url("#heartAlpha"), url("#circleAlpha");
}
tr.luminanceMaskType img {
mask-image: url("#heartLuminance"), url("#circleLuminance");
}
最后，我们使用 mask-composite 属性组合遮罩，按表列应用四个不同的枚举 mask-composite 值。
/* property we're testing */
td:nth-of-type(1) img {
mask-composite: add;
}
td:nth-of-type(2) img {
mask-composite: subtract;
}
td:nth-of-type(3) img {
mask-composite: intersect;
}
td:nth-of-type(4) img {
mask-composite: exclude;
}
为简洁起见，表格样式已隐藏。
结果
规范
| 规范 |
|---|
| CSS 蒙版模块 Level 1 # the-mask-composite |
浏览器兼容性
加载中…