Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Artikel ini membutuhkan tinjauan teknikal. Bagaimana Anda bisa membantu.

Relawan kami belum menerjemahkan artikel ini ke dalam Bahasa Indonesia . Bergabunglah dan bantu kami menyelesaikan pekerjaan ini!

Summary

The CSS mask-type properties defines if a mask is used as a luminance or an alpha mask.

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

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

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

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 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

Tag Dokumen dan Kontributor

 Kontributor untuk laman ini: ntim, Sebastianz, fscholz, teoli, krit, kscarfone, Heycam
 Terakhir diperbarui oleh: ntim,