css mask

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

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

初始值	as each of the properties of the shorthand: `mask-image`: `none` `mask-mode`: `match-source` `mask-repeat`: `no-repeat` `mask-position`: `center` `mask-clip`: `border-box` `mask-origin`: `border-box` `mask-size`: `auto` `mask-composite`: `add`

取值

<mask-reference>：设置遮罩图片的路径。详见 mask-image。

<masking-mode>：设置遮罩图片的模式。详见 mask-mode。

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

<bg-size>：设置遮罩的大小。详见 mask-size。

<repeat-style>：设置遮罩图片的重复性。详见 mask-repeat。repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{ 1,2}

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

<geometry-box> | no-clip：设置区域，会被遮罩图片影响。详见 mask-clip。

<compositing-operator>：设置遮罩图层的组合操作。详见 mask-composite。

/* 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-layer>#

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

where
<mask-reference> = none | <image> | <mask-source> <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ] <bg-size> = [ <length-percentage> | auto ]{ 1,2} | cover | contain <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{ 1,2} <geometry-box> = <shape-box> | fill-box | stroke-box | view-box <compositing-operator> = add | subtract | intersect | exclude <masking-mode> = alpha | luminance | match-source

where
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! ) <image-set()> = image-set( <image-set-option># ) <element()> = element( <id-selector> ) <paint()> = paint( <ident>, <declaration-value>? ) <cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? ) <gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> <box> = border-box | padding-box | content-box

where
<image-tags> = ltr | rtl <image-src> = <url> | <string> <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color> <image-set-option> = [ <image> | <string> ] <resolution> <id-selector> = <hash-token> <cf-mixing-image> = <percentage>? && <image> <cf-final-image> = <image> | <color> <linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> ) <repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> ) <radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> ) <repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> ) <conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

where
<rgb()> = rgb( <percentage>{ 3} [ / <alpha-value> ]? ) | rgb( <number>{ 3} [ / <alpha-value> ]? ) | rgb( <percentage>#{ 3} , <alpha-value>? ) | rgb( <number>#{ 3} , <alpha-value>? ) <rgba()> = rgba( <percentage>{ 3} [ / <alpha-value> ]? ) | rgba( <number>{ 3} [ / <alpha-value> ]? ) | rgba( <percentage>#{ 3} , <alpha-value>? ) | rgba( <number>#{ 3} , <alpha-value>? ) <hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) <hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) <side-or-corner> = [ left | right ] || [ top | bottom ] <color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop> <ending-shape> = circle | ellipse <size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{ 2} <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>

where
<alpha-value> = <number> | <percentage> <hue> = <number> | <angle> <linear-color-stop> = <color> <color-stop-length>? <linear-color-hint> = <length-percentage> <angular-color-stop> = <color> && <color-stop-angle>? <angular-color-hint> = <angle-percentage>

where
<color-stop-length> = <length-percentage>{ 1,2} <color-stop-angle> = <angle-percentage>{ 1,2} <angle-percentage> = <angle> | <percentage>

1、mask-border

允许你创建一个紧贴元素边框边缘的mask.

Values

<'mask-border-source'>

该属性为源图像. 参见 mask-border-source.

<'mask-border-slice'>

将源图像切割后的区域的尺寸，最多可指定四个值. 参见 mask-border-slice.

<'mask-border-width'>

边框mask的宽度. 最多可指定四个值. 参见 mask-border-width.

<'mask-border-outset'>

边框mask距离元素外边界的距离. 最多可指定四个值. 参见 mask-border-outset.

<'mask-border-repeat'>

定义如何调整源图像的边缘区域以适应边框mask的尺寸. 最多可指定四个值. 参见 mask-border-repeat.

<'mask-border-mode'>

定义是否将源图片设置为明亮度mask，或者透明度mask. 参见 mask-border-mode.

div {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  mask-border:
    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
    30 /         /* slice */
    36px 18px    /* width */
    round;       /* repeat */
}

2、mask-image

用于设置元素上遮罩层的图像。

/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image< values */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

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

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}

3、mask-mode

指示由mask-image 指向的遮罩被视为亮度或阿尔法遮罩。一个或多个关键字值，以逗号分隔。

/* 关取值的键字 */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* 多个类型的值 */
mask-mode: alpha, match-source;

/* 全局变量的值 */
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;

alpha：此关键字指示应使用掩码层图像的透明度（阿尔法通道）值作为掩码值。

luminance：此关键字指示掩膜层图像的亮度值应用作掩码值。

match-source：

If the mask-image property is of type <mask-source>, the luminance values of the mask layer image should be used as the mask values.
If it is of type <image>, the alpha values of the mask layer image should be used as the mask values.
如果mask-image属性是<mask-source>类型，掩模层图像的亮度值会被作为掩模值。
如果它是类型<image>，掩码层图像的alpha值应用作掩码值。

#masked {
  width: 227px;
  height: 200px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
  mask-mode: alpha; /* Can be changed in the live sample */
}

4、mask-repeat

定义了遮罩图片是否重复显示多个副本，以及如何重复。一个遮罩图片可以水平重复、垂直重复或双向重复，也可以不重复。

/* One-value syntax */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/* Multiple values */
mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;

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

#masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-repeat: repeat; /* 可在实时示例 live sample 中修改 */
  margin-bottom: 10px;
}

案例：

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

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

.examplethree {
  mask-image: url('mask1.png'), url('mask2.png');
  mask-repeat: repeat-x, repeat-y;
}

详细参考mozilla

取值