Manuales 
mask-type 524j1a
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. 283w1p
The mask-type property allows you to specify the preferred masking mode. However, you can override this preference by setting the mask-mode entry for more information.
Mask Modes: Alpha vs Luminance 2fb54
Alpha Masks 1p17w
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 n6g1j
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.
The mask-type property is a presentation attribute for SVG elements.
Official Syntax 55184y
mask-type: luminance | alpha
<mask> elementsValues 584j31
- 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 z5jo
The value of mask-mode overrides that specified by mask-type.
Examples 3e5p5z
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="SpaceOnUse">
<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 2x4j2k
The demo currently (June, 2014) does not work in any browser.
View this demo on the Codrops PlaygroundBrowser k5t66
CSS Masks 1o5wz
Method of displaying part of an element, using a selected image as a mask
W3C Candidate Recommendation
ed from the following versions:
Desktop 3n671n
- No
- 53
- No
- No
- No
Mobile / Tablet 4q224p
- No
- No
- No
- No
- 60
Notes z5jo
This module, as you can see in the 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 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.