The mask-type property is used to specify whether the contents of the SVG <mask> element are treated as a luminance mask or an alpha mask.
The mask-type property allows you to specify the preferred masking mode. However, you can override this preference by setting the mask-mode value to something different than auto on the masked content. See the mask-mode entry for more information.
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 transparency. 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
The mask-type property is a presentation attribute for SVG elements.
Official Syntax
mask-type: luminance | alpha
<mask> elements
Values
- luminance
-
A value of
luminanceindicates that the luminance values of the<mask>element should be used as the mask values. This is default value. - alpha
-
A value of
alphaindicates that the alpha values of the<mask>element should be used as the mask values.
Notes
The value of mask-mode overrides that specified by mask-type.
Examples
The following example specifies the mask-type of a <mask> element used as a mask on an element using the shorthand mask property:
img {
mask: url(#svgMask) luminance 50% 50% / 100% 100% no-repeat border-box;
}
The <mask> element inside the markup would look like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg>
<defs>
<mask id="svgMask" maskUnits="userSpaceOnUse">
<polygon fill="#29ABE2" stroke="#000000" stroke-width="4" stroke-miterlimit="10" points=".5,0 1,.5 .5,1 0,.5 "/>
</mask>
</defs>
</svg>
</body>
</html>
Live Demo
The demo currently (June, 2014) does not work in any browser.
View this demo on the Codrops PlaygroundBrowser Support
CSS Masks
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 120
- 53
- No
- 106
- 15
Mobile / Tablet
- 15
- 130
- No
- 130
- 130
Notes
This module, as you can see in the support table above, hasn’t been fully implemented in all browsers, so you’re probably not going to be able to use all features even in browsers that have implemented certain properties (for the time being).
In the meantime, you can check out this open source feature support table by Alan Greenblatt on GitHub. The purpose of this table is to provide some insight into what the current state of affairs is with various browser implementations of CSS Clipping and Masking features.
