Masking selectively reveals or hides portions of an element using a mask image. Unlike border-radius, it can create irregular shapes while preserving the element’s background or content. section 14.2
Reveal an image through a star
Give an element a background image, then apply a mostly transparent mask containing an opaque star. The browser shows the element where the mask is visible and hides the rest. Use mask-size: 100% 100% to align the mask with the element, and include the -webkit-mask-image fallback when needed. 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 CSS pattern for applying a star-shaped image mask to a background image. section 14.2
Choose the mask source and behavior according to the visual effect:
- Use an image, gradient, or SVG mask as mask-image; combine multiple masks with mask-composite. section 14.2.3
- Control placement, dimensions, tiling, origin, and affected area with mask-position, mask-size, mask-repeat, mask-origin, and mask-clip. section 14.2.3
- Use opacity or a gradient to create partial visibility, fades, vignettes, or stripes rather than only hard-edged shapes. section 14.2.1
- Debug an invisible mask by temporarily applying the same source as background-image, making its shape visible while correcting the declarations. section 14.2.1
Listing 14.7 Applying a gradient as a mask
.mask {
width: 300px;
min-height: 300px;
background-image: url(images/bird.jpg);
background-size: cover;
background-position: 100%;
-webkit-mask-image: linear-gradient(to bottom, transparent, black);
mask-image: linear-gradient(to bottom, transparent, black);
}
Inspect a gradient mask that fades an image from transparent at the top to black at the bottom. section 14.2.1
