This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

mask-mode

Summary

This property indicates whether the <mask-reference> is treated as a luminescence mask or as an alpha mask.

Overview table

Initial value
auto
Applies to
All elements. In SVG, it applies to container elements without the <defs> element and all graphics elements.
Inherited
No
Media
visual
Computed value
As specified.
Animatable
No

CSS Object Model Property
:

Percentages
N/A

Syntax

  • mask-mode: alpha
  • mask-mode: auto
  • mask-mode: luminance

Values

auto
Implicitly sets alpha or luminance, depending on the <mask-reference> value of the mask-image property. If it is of type <mask-source>, the luminance values of the mask image should be used as the mask values; if it is of type <image>, the alpha values of the mask image should be used as the mask values.
alpha
Indicates that the alpha values of the mask image should be used as the mask values.
luminance
Indicates that the luminance values of the mask image should be used as the mask values.

Examples

/* auto */
#img1 {
    mask-source-type: auto;
  }

/* alpha */
#img2 {
    mask-source-type: alpha;
  }

/* luminance */
#img3 {
    mask-source-type: luminance;
  }

Related specifications

CSS Masking Level 1
W3C Editor’s Draft