mask-mode
The mask-mode
CSS property sets whether the mask reference defined by mask-image
is treated as a luminance or alpha mask.
css
/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* Multiple values */
mask-mode: alpha, match-source;
/* Global values */
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: revert-layer;
mask-mode: unset;
Syntax
The mask-mode
property is specified as one or more of the keyword values listed below, separated by commas.
Values
alpha
-
This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.
luminance
-
This keyword indicates that the luminance values of the mask layer image should be used as the mask values.
match-source
-
If the
mask-image
property is of type<mask-source>
, the luminance values of the mask layer image should be used as the mask values.If it is of type
<image>
, the alpha values of the mask layer image should be used as the mask values.
Formal definition
Initial value | match-source |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Using alpha mask mode
Specifications
Specification |
---|
CSS Masking Module Level 1 # the-mask-mode |
Browser compatibility
BCD tables only load in the browser