mask-composite

Avatar of Mojtaba Seyedi
Mojtaba Seyedi on

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费信用额度!

mask-composite CSS 属性允许我们将 蒙版层图像 与其下面的蒙版层组合。

.element {
  mask-composite: subtract;
}

当存在多个蒙版层图像时,需要将它们合成到一个最终的蒙版层中。 mask-composite 指定如何将具有不同形状的蒙版层 组合成单个图像。 将其想象成在 Photoshop、Figma 或 Sketch 等图像编辑应用程序中组合图层,其中您具有控制层组合方式的控件。

在 Sketch 中组合两个图层

或者,另一种思考方式

Circle plus rectangle equals a circle with the shape of a rectangle cut out of it.
第二层(矩形)从第一层(圆形)中减去。

语法

mask-composite: <compositing-operator>#
where
<compositing-operator> = add | subtract | intersect | exclude
  • 初始值: add
  • 应用于: 所有元素。在 SVG 中,它应用于不包含 <defs> 元素的容器元素和所有图形元素
  • 继承:
  • 计算值: 如指定
  • 动画类型: 离散

/* Keyword values */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

/* Global values */
mask-composite: inherit;
mask-composite: initial;
mask-composite: unset;

对于合成,应用 mask-composite 值的蒙版层图像为,而所有低于它的蒙版层为目标

  • add: 默认值。更靠近用户的蒙版图像层(源)放置在下一个蒙版图像层(目标)的顶部。组合是最终的蒙版层。
  • subtract: 更靠近用户的蒙版图像层放置在其超出下一个蒙版图像层的位置。换句话说,最终的组合是与源重叠的目标部分。
  • intersect: 与目标重叠的源部分将替换目标。换句话说,最终的组合是与源重叠的目标部分。
  • exclude: 源和目标的非重叠区域组合在一起。
  • initial: 应用属性的默认值 add
  • inherit: 采用父元素的 mask-composite 值。
  • unset: 从元素中删除当前 mask-composite

示例

在下面的示例中,两个蒙版图像层使用 exclude 值组合。

img {
  mask-image: url(circle.svg), url(plus.svg);
  mask-size: 150px, 200px;
  mask-position: center;
  mask-composite: exclude;
}

在撰写本文时,此示例仅在 Firefox 中有效。

使用多个值

此属性可以接受逗号分隔的值列表用于蒙版合成,值的个数比使用 mask-image 指定的蒙版图像个数少一个。

在下面的示例中

  • 第一个值指定第二个图像与第三个图像的合成操作,以及
  • 第二个值用于对第一个蒙版图像与第一次操作获得的结果执行合成操作。

对于任意数量的蒙版层图像,依此类推。请记住,第一个指定的图像放置在后面指定的图像的顶部。

.element {
  mask-image: url(circle.png), url(star.png), url(square.png);
  mask-composite: exclude, subtract;
}

浏览器支持

IEEdgeFirefoxChromeSafariOpera
否 *53+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
87+
来源: caniuse

* Edge 18 在采用 Blink 渲染引擎之前支持 mask-composite

更多信息