CSS - mask-type
The CSS mask-type properties defines if a mask is used as a luminance or an alpha mask.
Example
Let's apply the following rectangle as a mask:
HTML
Copy Code
<rect x="10" y="10" width="80" height="80" fill="red" fill-opacity="0.7" />
mask
HTML
Copy Code
<svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" fill="red" fill-opacity="0.7"/> </svg>
which leads to the following square:
to this box:
box
CSS
Copy Code
.redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; }
HTML
Copy Code
<div class="redsquare"></div>
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; |
|
HTML Copy Code <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> CSS Copy Code .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } |
HTML Copy Code <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> CSS Copy Code .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } |
Syntax
CSS
Copy Code
/* 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
CSS
Copy Code
luminance <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> alpha
Description
The CSS mask-type properties defines if a mask is used as a luminance or an alpha mask.
| Initial value | luminance |
|---|---|
| Applies to | <mask> elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animatable | no |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
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.
See Also
- Other mask-related properties:
mask
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Masking Level 1 The definition of 'mask-type' in that specification. |
Candidate Recommendation | Initial definition. |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/mask-type