CSS mask-size property sets the size of the mask image on the mask painting area. The mask-size property in CSS is used to specify the size of the mask image applied to an element using CSS masking. It determines the width and height of the mask image, allowing for precise control over its dimensions
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
html
<!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
html
<!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 4
- Firefox 53
- Safari 15.4
- Opera 15
- Edge 79
- Internet Explorer (Not Supported)