CSS mask-type 属性
示例
查看两个 SVG <mask> 元素；一个使用 mask-type alpha，另一个使用 mask-type luminance
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
<rect width="10" height="10" fill="red" fill-opacity="0.7" />
</mask>
<mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance">
<rect width="10" height="10" fill="red" fill-opacity="0.7" />
</mask>
</defs>
</svg>
亲自尝试 »
定义和用法
The mask-type 属性指定 SVG <mask> 元素是作为亮度蒙版还是作为 alpha 蒙版处理。
这适用于 SVG <mask> 元素本身。
| 默认值 | luminance |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 了解有关 可动画 的信息 |
| 版本 | CSS 蒙版模块级别 1 |
| JavaScript 语法 | object.style.maskType="alpha" |
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| mask-type | 24 | 79 | 35 | 7 | 15 |
CSS 语法
mask-type: luminance|alpha|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| luminance | 将蒙版图像视为亮度蒙版。这是默认值。 |
| alpha | 将蒙版图像视为 alpha 蒙版 |
| initial | 将此属性设置为其默认值。 了解有关 initial 的信息 |
| inherit | 从其父元素继承此属性。 了解有关 inherit 的信息 |
相关页面
CSS 参考： mask 属性
CSS 参考： mask-clip 属性
CSS 参考： mask-composite 属性
CSS 参考： mask-image 属性
CSS 参考： mask-mode 属性
CSS 参考： mask-origin 属性
CSS 参考： mask-position 属性
CSS 参考： mask-repeat 属性
CSS 参考： mask-size 属性
CSS 教程： CSS 蒙版
