Mask-Size is a CSS property that is used to define the size of the mask image. It is used in conjunction with the mask-image property to create a mask effect on an element. The mask-size property is used to specify the size of the mask image, which can be either a fixed size or a percentage of the element's size.
The mask-size property is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. It is also supported in Internet Explorer 10 and above, but with some limitations.
The syntax for the mask-size property is as follows:
mask-size: auto | length | percentage | cover | contain;
The values for the mask-size property are:
Here are some examples of how to use the mask-size property:
In this example, we set the mask-size property to a fixed size of 200 pixels by 200 pixels:
.element {
mask-image: url('mask.png');
mask-size: 200px 200px;
}
This will display the mask image at a fixed size of 200 pixels by 200 pixels.
In this example, we set the mask-size property to a percentage of the element's size:
.element {
mask-image: url('mask.png');
mask-size: 50% 50%;
}
This will display the mask image at a size that is 50% of the element's width and 50% of the element's height.
In this example, we set the mask-size property to cover the entire element:
.element {
mask-image: url('mask.png');
mask-size: cover;
}
This will resize the mask image to cover the entire element, while maintaining its aspect ratio.
In this example, we set the mask-size property to fit within the element:
.element {
mask-image: url('mask.png');
mask-size: contain;
}
This will resize the mask image to fit within the element, while maintaining its aspect ratio.
The mask-size property is a useful CSS property that can be used to create mask effects on elements. It allows you to specify the size of the mask image, which can be either a fixed size or a percentage of the element's size. The mask-size property is supported in all modern browsers, and can be used to create a variety of mask effects.