mask-type

mask-type CSS 属性设置 SVG <mask> 元素是作为 *亮度* 还是 *alpha* 蒙版使用。它应用于 <mask> 元素本身。

此属性可能会被 mask-mode 属性覆盖，该属性具有相同的效果，但应用于使用蒙版的元素。Alpha 蒙版通常渲染速度更快。

语法

css
/* Keyword values */
mask-type: luminance;
mask-type: alpha;

/* Global values */
mask-type: inherit;
mask-type: initial;
mask-type: revert;
mask-type: revert-layer;
mask-type: unset;

mask-type 属性被指定为下面列出的关键字值之一。

Values

luminance

是一个关键字，表示关联的蒙版图像是一个亮度蒙版，即在应用它时必须使用其 相对亮度 值。

alpha

是一个关键字，表示关联的蒙版图像是一个 alpha 蒙版，即在应用它时必须使用其 alpha 通道 值。

正式定义

初始值luminance
应用于<mask> 元素
继承no
计算值as specified
动画类型discrete

正式语法

mask-type = 
  luminance  |
  alpha

示例

设置 alpha 蒙版

HTML

html
<div class="redsquare"></div>
<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="0"
  height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect
        x=".1"
        y=".1"
        width=".8"
        height=".8"
        fill="red"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128 128 128);
  border: solid 1px black;
  mask: url("#m");
}

Result

设置亮度蒙版

HTML

html
<div class="redsquare"></div>
<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="0"
  height="0">
  <defs>
    <mask
      id="m"
      maskContentUnits="objectBoundingBox"
      style="mask-type:luminance">
      <rect
        x=".1"
        y=".1"
        width=".8"
        height=".8"
        fill="red"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

css
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128 128 128);
  border: solid 1px black;
  mask: url("#m");
}

Result

规范

规范
CSS 蒙版模块级别 1
# the-mask-type

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见