在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

mask-type CSS property sets whether an SVG <mask> element is used as a luminance or an alpha mask. It applies to the <mask> element itself.

/* Keyword values */
mask-type: luminance;
mask-type: alpha;
/* Global values */
mask-type: inherit;
mask-type: initial;
mask-type: unset;
					

This property may be overridden by the mask-mode property, which has the same effect but applies to the element where the mask is used. Alpha masks will generally be faster to render.

句法

mask-type property is specified as one of the keyword values listed below.

值

luminance

Is a keyword indicating that the associated mask image is a luminance mask, i.e., that its relative luminance values must be used when applying it.

alpha

Is a keyword indicating that the associated mask image is an alpha mask, i.e., that its alpha channel values must be used when applying it.

形式定义

初始值	luminance
适用于	<mask> elements
继承	no
计算值	如指定
动画类型	discrete

形式句法

luminance | alpha
					

范例

Setting an alpha mask

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

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

结果

Setting a luminance mask

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

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

结果

规范

规范	状态	注释
CSS Masking Module Level 1 The definition of 'mask-type' in that specification.	候选推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
mask-type	Chrome 完整支持 24	Edge 完整支持 79	Firefox 完整支持 35 完整支持 35 不支持 20 — 52 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 15	Safari 完整支持 6.1	WebView Android 完整支持 37	Chrome Android 完整支持 25	Firefox Android 完整支持 35 完整支持 35 不支持 20 — 52 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 14	Safari iOS 完整支持 7	Samsung Internet Android 完整支持 1.5

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• Other mask-related properties: mask , mask-mode

元数据

• 最后修改： Jul 20, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Masking
4. 特性

   1. clip
   2. clip-path
   3. mask
   4. mask-border
   5. mask-border-mode
   6. mask-border-outset
   7. mask-border-repeat
   8. mask-border-slice
   9. mask-border-source
   10. mask-border-width
   11. mask-clip
   12. mask-composite
   13. mask-image
   14. mask-mode
   15. mask-origin
   16. mask-position
   17. mask-repeat
   18. mask-size
   19. mask-type