面具类型 | mask-type (Masking) - CSS 中文开发手册
mask-type属性定义由SVG定义的掩码。<mask>元素用作亮度或者阿尔法 mask。适用于<mask>元素。它可能被掩码模式属性，该属性具有相同的效果，但适用于使用掩码的元素。阿尔法mask 通常会更快地渲染。
/* Keyword values */ mask-type: luminance; mask-type: alpha; /* Global values */ mask-type: inherit; mask-type: initial; mask-type: unset;
| Initial value | luminance |
|---|---|
| Applies to | <mask> elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
下面列出的一个或多个关键字值，以逗号分隔。
值
luminance是一个关键字，指示关联的掩码图像是亮度掩码，即它的相对亮度应用时必须使用值。
alpha是一个关键字，指示关联的掩码图像是alpha掩码，即它的α通道应用时必须使用值。
形式语法
luminance | alpha
实例
让%27将以下矩形应用于掩码：
<rect x="10" y="10" width="80" height="80"
fill="red" fill-opacity="0.7" /> 呈现如以下代码块：
在这个盒子里：
如果浏览器支持该属性，则结果具有不同的mask-type应用于<mask>元素是这两个不同的正方形：
| mask-type: alpha; | mask-type: luminance; |
|---|---|
| | |
规格
| Specification | Status | Comment |
|---|---|---|
| CSS Masking Module Level 1The definition of 'mask-type' in that specification. | Candidate Recommendation | Initial definition. |
浏览器兼容性
| 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 | ? | ? | ? | ? | ? |