CSS mask-type 属性
实例
查看两个 SVG<mask> 元素；一个使用 mask-type alpha，一个使用 mask-type luminance
<svg width="200" height="120" xmlns="https://w3org.cn/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>亲自试一试 »定义和用法
mask-type 属性指定 SVG<mask> 元素是作为亮度蒙版还是作为 alpha 蒙版处理。
这适用于 SVG<mask> 元素本身。
| 默认值 | luminance |
|---|---|
| 继承 | no |
| 可动画 | 否。 阅读关于可动画属性 |
| 版本 | 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 蒙版
