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 mask-type CSS property sets whether an SVG <mask> element is used as a luminance or an alpha mask. It applies to the <mask> element itself.

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

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

This property 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.

Initial valueluminance
Applies to<mask> elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderper grammar

Syntax

The mask-type property is specified as one of the keyword values listed below.

Values

luminance
Is a keyword indicating that the associated mask image is a luminance mask, i.e., 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, i.e., 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 24Edge ? Firefox Full support 35
Full support 35
No support 20 — 52
Disabled
Disabled From version 20 until version 52 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 35
Full support 35
No support 20 — 52
Disabled
Disabled From version 20 until version 52 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
Applies to HTML elementsChrome No support NoEdge ? Firefox Full support 20IE No support NoOpera No support NoSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 20Opera Android ? Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: ddbeck,