CSS mask-size property
CSS mask-size property sets the size of mask image on the mask painting area.
Syntax:
mask-size: Keyword values /* Or */ mask-size: One-values /* Or */ mask-size: Two-values /* Or */ mask-size: Multiple-values /* Or */ mask-size: 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 cover, contain, etc.
- One-values: This property value refers to the values defined with units like %, em, px, etc. Height is set to auto. Its Basic Syntax is mask-size: width of the image;
- Two-values: This property value refers to the values defined with units like %, em, px, etc. Height is set to auto. Its Basic Syntax is mask-size: width of the image height of the image;
- Multiple values: This property value refers to the values defined with units like %, px, em, auto, 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-size property using One-values
<!DOCTYPE html><html> <head> <style> .Container{ width:25%; height:200px; box-sizing:border-box; border:1px solid green; } .geeks{ width: 60%; height:200px; background: green; -webkit-mask-image: url("image.svg"); -webkit-mask-repeat:no-repeat; mask-size: cover; } </style> </head><body> <div class="Container"> <div class="geeks"></div> </div> </body> </html> |
Output:
Example 2: Below example illustrates the mask-size property using Two-values
<!DOCTYPE html><html> <head> <style> .Container{ width:25%; height:200px; box-sizing:border-box; border:1px solid green; } .geeks{ width: 60%; height:200px; background: green; -webkit-mask-image: url("image.svg"); -webkit-mask-repeat:no-repeat; mask-size: 40% 80%; } </style> </head><body> <div class="Container"> <div class="geeks"></div> </div> </body> </html> |
Output:
Browsers Supported:
- Chrome
- Firefox
- Safari
- Opera
- Edge
- Internet Explorer (Not Supported)
.png)