CSS 属性

CSS mask-composite 属性定义如何将遮罩图像与元素的背景合成。

属性值

属性 mask-composite 可以具有以下一个或多个关键字值，以逗号分隔。

  • add: 将源定位在目标上方。

  • subtract: 位置源，使其位于目标之外。

  • intersect : 将目标替换为与源重叠的部分。

  • exclude : 源和目标的非重叠区域不重叠。

这里，源指的是当前掩模层，而其后面的所有层都是已知的作为目的地。

适用范围

所有元素。在 SVG 中，它适用于不包括 <defs> 元素和所有图形元素的容器元素。

语法

mask-composite: add | subtract | intersect | exclude;

CSS mask-composite: add

以下示例演示如何使用"add"复合模式组合蒙版。最终蒙版包含两个蒙版图像覆盖的区域 -

<html>
<head>
<style>
   .box {
      margin: 20px auto;
      display: block;
      width: 200px;
      height: 200px;
      background-color: red;
      -webkit-mask-image: url(/css/images/book.png), url(/css/images/heart.png);
      mask-image: url(/css/images/book.png), url(/css/images/heart.png);
      -webkit-mask-repeat: no-repeat, no-repeat;
      mask-repeat: no-repeat, no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-composite: add;
      mask-composite: add;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS mask-composite: subtract 

以下示例演示了 mask-composite 属性如何使用subtract值。应从背景中减去两个蒙版图像的重叠区域 -

<html>
<head>
<style>
   .box {
      margin: 20px auto;
      display: block;
      width: 200px;
      height: 200px;
      background-color: red;
      -webkit-mask-image: url(/css/images/book.png), url(/css/images/heart.png);
      mask-image: url(/css/images/book.png), url(/css/images/heart.png);
      -webkit-mask-repeat: no-repeat, no-repeat;
      mask-repeat: no-repeat, no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-composite: subtract;
      mask-composite: subtract;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS mask-composite: intersect 

以下示例演示了 mask-composite: intersect 属性如何定义两个遮罩图像的重叠区域（交集） -

<html>
<head>
<style>
   .box {
      margin: 20px auto;
      display: block;
      width: 200px;
      height: 200px;
      background-color: red;
      -webkit-mask-image: url(/css/images/book.png), url(/css/images/heart.png);
      mask-image: url(/css/images/book.png), url(/css/images/heart.png);
      -webkit-mask-repeat: no-repeat, no-repeat;
      mask-repeat: no-repeat, no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size:100% 100%;
      -webkit-mask-composite: intersect;
      mask-composite: intersect;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS mask-composite: except 

下面的示例演示了 mask-composite: except 属性定义了排除的形状来自两个掩模图像 -

<html>
<head>
<style>
   .box {
      margin: 20px auto;
      display: block;
      width: 200px;
      height: 200px;
      background-color: red;
      -webkit-mask-image: url(/css/images/book.png), url(/css/images/heart.png);
      mask-image: url(/css/images/book.png), url(/css/images/heart.png);
      -webkit-mask-repeat: no-repeat, no-repeat;
      mask-repeat: no-repeat, no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size:100% 100%;
      -webkit-mask-composite: exclude;
      mask-composite: exclude;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>