CSS 中文开发手册
面具类型 | 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 |
? |
? |
? |
? |
? |
CSS 中文开发手册