1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 属性
  5. mask

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

mask

基线
广泛可用

自 2023年12月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

css
/* Keyword values */
mask: none;

/* Image values */
mask: url(mask.png); /* 使用位图来做遮罩 */
mask: url(masks.svg#star); /* 使用 SVG 图形中的形状来做遮罩 */

/* Combined values */
mask: url(masks.svg#star) luminance; /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px; /* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘 40px，离左边缘 20px */
mask: url(masks.svg#star) 0 0/50px 50px; /* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是 50px */
mask: url(masks.svg#star) repeat-x; /* Element within SVG graphic used as horizontally repeated mask */
mask: url(masks.svg#star) stroke-box; /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude; /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */

/* Global values */
mask: inherit;
mask: initial;
mask: unset;

备注：mask 的简写会将 mask-border 设为初始值。使用 mask 的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证 mask-border 也会重新设置为新的效果样式。

初始值该简写所对应的每个属性：
适用元素all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
是否是继承属性否
Percentages该简写所对应的每个属性：
计算值该简写所对应的每个属性：
  • mask-image: as specified, but with <url> values made absolute
  • mask-mode: as specified
  • mask-repeat: Consists of two keywords, one per dimension
  • mask-position: Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
  • mask-clip: as specified
  • mask-origin: as specified
  • mask-size: as specified, but with relative lengths converted into absolute lengths
  • mask-composite: as specified
动画类型该简写所对应的每个属性：
Creates stacking context是

Syntax

Values

<mask-reference>

设置遮罩图片的路径。详见 mask-image。

<masking-mode>

设置遮罩图片的模式。详见 mask-mode。

<position>

设置遮罩图片的位置。详见 mask-position。

<bg-size>

设置遮罩的大小。详见 mask-size。

<repeat-style>

设置遮罩图片的重复性。详见 mask-repeat。

<geometry-box>

如果只有一个 <geometry-box> 值被赋予，他将会设置 mask-origin 和 mask-clip。如果两个 <geometry-box> 值显示，第一个值代表 mask-origin 第二个值代表 mask-clip。

<geometry-box> | no-clip

设置区域，会被遮罩图片影响。详见 mask-clip。

<compositing-operator>

设置遮罩图层的组合操作。详见 mask-composite。

正式语法

mask = 
  <mask-layer>#  

<mask-layer> = 
  <mask-reference>              ||
  <position> [ / <bg-size> ]?   ||
  <repeat-style>                ||
  <geometry-box>                ||
  [ <geometry-box> | no-clip ]  ||
  <compositing-operator>        ||
  <masking-mode>                

<mask-reference> = 
  none           |
  <image>        |
  <mask-source>  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  repeat-block       |
  repeat-inline      |
  <repetition>{1,2}  

<geometry-box> = 
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box     

<compositing-operator> = 
  add        |
  subtract   |
  intersect  |
  exclude    

<masking-mode> = 
  alpha         |
  luminance     |
  match-source  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<mask-source> = 
  <url>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>  

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

<shape-box> = 
  <visual-box>     |
  margin-box       |
  half-border-box  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

例子

css
.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}

规范

规范
CSS Masking Module Level 1
# the-mask

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题