CSS参考手册
面具 | Masking
面具类型 | mask-type
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 |
? |
? |
? |
? |
? |
面具 | Masking相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。