Masking in CSS is one way to hide parts of the element and show others. Another is clip-path, but let’s not focus on that today. “Masks are images; Clips are paths” is one way to think about the difference, although it certainly gets confusing.
In this video, we’ll look at how similar mask and its mask-* properties are really similar to the background and background-* properties. And they can be used together nicely, sinces a mask is a way to hide some parts of an image but still reveal the content and background of the other parts.
SVG is great for masks, as the vector nature allows them to scale nicely and the generally small file size is nice. One of the confusing bits around masks is the mask-type. The alpha value means that the transparent parts of the image become the transparent parts of the mask (which is sometimes more mind-bending than you hope). A luminance value means white is opaque and black is transparent and gray is in between. Or is it the other way around? And what about masks that have an alpha channel already? And are the areas in an SVG file with nothing in them considered alpha transparent? Probably? Let’s have a play.
