The mask-composite property defines multiple composite operations to combine multi-mask layers. The first URL layer is at the top and the last URL layer is at the bottom of all the layers.
Syntax:
mask-composite: Keyword values /* Or */ mask-composite: Global values
Property values: This property accepts values mentioned above and described below:
- Keyword values: This property value refers to the values defined with units like add, subtract, intersect, exclude, etc.
- Global values: This property value refers to the values defined with units like inherit, initial, unset, etc
Example 1: Below example illustrates the mask-composite property using add :
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width: 22%;
height: 200px;
background: green;
-webkit-mask-image:
url("image.svg"),
url("image2.svg");
-webkit-mask-size: 140px, 120px;
-webkit-mask-position: 140px 60px, 50px;
-webkit-mask-repeat: no-repeat;
mask-composite: add;
}
</style>
</head>
<body>
<div class="geeks"></div>
</body>
</html>
Output:
Example 2: Below example illustrates the mask-composite property using subtract :
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width: 22%;
height: 200px;
background: green;
-webkit-mask-image:
url("image.svg"),
url("image2.svg");
-webkit-mask-size: 140px, 120px;
-webkit-mask-position: 140px 60px, 50px;
-webkit-mask-repeat: no-repeat;
mask-composite: subtract;
}
</style>
</head>
<body>
<div class="geeks"></div>
</body>
</html>
Output:
Browsers Supported:
- Firefox 53
- Safari 15.4