mask-size sets a mask image’s horizontal and vertical dimensions with lengths, percentages, or the keywords cover, contain, and auto. It works much like background-size, controlling how the mask fits the element. section 14.2.3 section 14.2
Use mask-size with related mask properties to control the visible result:
- Set explicit dimensions such as 100% 100% to stretch a mask across the element. section 14.2
- Use cover or contain when the mask should scale proportionally within the element. section 14.2
- Place mask-size after mask-position and a slash when using the mask shorthand. section 14.2.3
- Omit mask-size for gradients that automatically fill the element. section 14.2.1
Stretching a star mask
A 300px square element can display a background image through a star-shaped mask by sizing the mask to the element: -webkit-mask-size: 100% 100%; mask-size: 100% 100%; section 14.2
Listing 14.6 Applying an image mask
.mask {
width: 300px;
min-height: 300px;
background-image: url(images/bird.jpg);
background-size: cover;
background-position: 100%;
-webkit-mask-image: url(images/star-mask.png); #1
-webkit-mask-size: 100% 100%; #1
mask-image: url(images/star-mask.png); #2
mask-size: 100% 100%; #3
}
Inspect the complete image-mask example, including the prefixed fallback and the unprefixed mask-size declaration. section 14.2
