CSS mask-composite property
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 > .Beginner { 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 = "Beginner" ></ div > </ body > </ html > |
Output:
Example 2: Below example illustrates the mask-composite property using subtract :
HTML
<!DOCTYPE html> < html > < head > < style > .Beginner { 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 = "Beginner" ></ div > </ body > </ html > |
Output:
Browsers Supported:
- Firefox 53
- Safari 15.4
Contact Us