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 :
HTML
<!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 :
HTML
<!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