CSS mask-type 属性

定义和用法

mask-type 属性指定 SVG <mask> 元素是作为亮度遮罩还是作为 alpha 遮罩来处理。

此属性适用于 SVG <mask> 元素本身。

实例

查看两个 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>

亲自试一试

CSS 语法

mask-type: luminance|alpha|initial|inherit;

属性值

值 描述
luminance 将遮罩图像视为亮度遮罩。默认值。
alpha 将遮罩图像视为 alpha 遮罩。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： luminance
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS Masking Module Level 1
JavaScript 语法： object.style.maskType="alpha"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
24 79 35 7 15

相关页面

教程：CSS 遮罩

参考：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 属性