MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The CSS mask-type property defines if a mask defined by an SVG <mask> element is used as a luminance or an alpha mask.  It applies to the <mask> element.  It may be overridden by the mask-mode property which has the same effect, but applies to the element where the mask is used. Alpha masks will generally be faster to render.

/* Keyword values */
mask-type: luminance;
mask-type: alpha;

/* Global values */
mask-type: inherit;
mask-type: initial;
mask-type: unset;

Initial valueluminance
Applies to<mask> elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

One or more of the keyword values listed below, separated by commas.

Values

luminance
Is a keyword indicating that the associated mask image is a luminance mask, that is that its relative luminance values must be used when applying it.
alpha
Is a keyword indicating that the associated mask image is an alpha mask, that is that its alpha channel values must be used when applying it.

Formal syntax

luminance | alpha

Examples

Let's apply the following rectangle as a mask:

<rect x="10" y="10" width="80" height="80"
    fill="red" fill-opacity="0.7" />
which leads to the following square:

to this box:

The result, if your browser supports the property, with different value of mask-type applied to the <mask> element are these two different squares:

mask-type: alpha; mask-type: luminance;

Specifications

Specification Status Comment
CSS Masking Module Level 1
The definition of 'mask-type' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (for SVG) 24.0 35.0 (35.0)[1] No support 15.0 7
Applies to HTML elements No support 35.0 (35.0)[1] No support No support ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (for SVG) ? 35.0 (35.0)[1] No support 15.0 No support
Applies to HTML elements ? ? ? ? ?

[1] Available since Gecko 20 (Firefox 20.0 / Thunderbird 20.0 / SeaMonkey 2.17) behind the preference layout.css.masking.enabled, defaulting to false. That preference was removed in Gecko 52 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) (see bug 1308239).

See also

  • Other mask-related properties: mask

Schlagwörter des Dokuments und Mitwirkende

 Zuletzt aktualisiert von: wbamberg,