mask-border-mode

The mask-border-mode property is used to specify whether the <image> value for mask-border-source is treated as a luminance mask or an alpha mask.

Mask Modes: Alpha vs Luminance

Alpha Masks

An alpha mask is an image that has an alpha channel, and the alpha values are used as the mask values. A very simple example of an alpha channel is a simple PNG image with black and transparent areas.

In graphics, an alpha channel is a portion of each pixel’s data that is reserved for transparency information. The alpha channel is used extensively in masking operations—it specifies how the pixel’s colors should be merged with another pixel when the two are overlaid, one on top of the other. Different parts of the image would have different levels of transparency depending on how much you wanted the masked element to show through.

In the case of a black and transparent image as the one showed above, the black areas have an alpha value of one (1), and the transparent areas have an alpha value of zero (0).

When an image with an alpha channel is used as an alpha mask, the areas where the image is black (fully opaque) are the areas where the element will be visible, and the areas where the image is transparent, the element will not show. Translucent areas will show the element with a certain level of transparent. The mask value at a given point is simply the value of the alpha channel at that point. The color channels (if present) do not contribute to the mask value.

Luminance Masks

A luminance mask is similar to an alpha mask, except that instead of using an image’s alpha channel values as mask values, the image’s luminance values should be used.

For example, a very simple luminance mask is similar to the simple alpha mask we showed above, but instead of using black areas to define where the element will show, the black areas would be white:

When a luminance mask is used, the mask value at a given point is computed from the color channel values by computing the luminance from the color channels first, and then multiplying the computed luminance value by the corresponding alpha value to produce the mask value.

A luminance mask can contain any color, not just white. The luminance value is then determined by the RGB values of the mask and the luminance coefficients as follows: luma = (0.2126 * R + 0.7152 * G + 0.0722 * B). To determine the transparency of the object, the alpha channel of the object is then multiplied by the luminance value and the alpha channel of the mask.

So, if you have a colorful image, that has some fully transparent areas, the element will not show where the image is transparent, but where the image has an alpha value of 1, the value of the mask depends on the colors used (per pixel). See the following image for an example. The masked image shows through the different colors in a different way.

Trivia & Notes

Regardless of the method used (alpha or luminance), the procedure for calculating mask values assumes the content of the mask is a four-channel RGBA graphics object. For other types of graphics objects, special handling is required as follows.

• For a three-channel RGB graphics object that is used in a mask (e.g., when referencing a three-channel image file), the effect is as if the object were converted into a four-channel RGBA image with the alpha channel uniformly set to 1.
• For a single-channel image that is used in a mask (e.g., when referencing a single-channel grayscale image file), the effect is as if the object were converted into a four-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.

Also, the mask-mode and mask-type properties must have no affect on the mask border image type.