MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

这篇翻译不完整。请帮忙从英语翻译这篇文章

简介

css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。

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

初始值as each of the properties of the shorthand:
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性
Percentagesas each of the properties of the shorthand:
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
  • mask-position: repeatable list of simple list of length, percentage, or calc
  • mask-size: repeatable list of simple list of length, percentage, or calc
正规顺序the unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

Syntax

/* Keyword values */
mask: none;

/* Image values */
mask: url(mask.png);                       /* Pixel image used as mask */
mask: url(masks.svg#star);                 /* Element within SVG graphic used as mask */

/* Combined values */
mask: url(masks.svg#star) luminance;       /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px;       /* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left */
mask: url(masks.svg#star) 0 0/50px 50px;   /* Element within SVG graphic used as mask with a width and height of 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;

Values

<mask-reference>
设置遮罩图片的路径. See mask-image.
<masking-mode>
设置遮罩图片的模式. See mask-mode.
<position>
设置遮罩图片的位置。 See mask-position.
<bg-size>
设置遮罩的大小. See mask-size.
<repeat-style>
设置遮罩图片的重复性. See mask-repeat.
<geometry-box>
如果只有一个 <geometry-box> 值被赋予, 他将会设置mask-originmask-clip.如果两个<geometry-box> 值显示, 第一个值代表 mask-origin 第二个值代表 mask-clip.
<geometry-box> | no-clip
设置区域, 会被遮罩图片影响. See mask-clip.
<compositing-operator>
设置遮罩图层的组合操作。 See mask-composite.

Formal syntax

<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 | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ 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> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>
<length-percentage> = <length> | <percentage>
<shape-box> = <box> | margin-box

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

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<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> )

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

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

例子

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

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

参数

Specification Status Comment
CSS Masking Module Level 1
mask
Candidate Recommendation Extends its usage to HTML elements.
Extends its syntax by making it a shorthand for the new mask-* properties defined in that specification.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
mask
Recommendation Initial definition

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (for SVG, only setting the mask image) 1.0-webkit[1] (Yes) (Yes)[2] 未实现 (Yes)-webkit[1] 4.0-webkit[3]
Applies to HTML Elements 1.0-webkit[1] ? 3.5 (1.9.1)[1] 未实现 (Yes)-webkit[1] 未实现
Shorthand for mask-* properties 1.0-webkit[1] ? 未实现[4] 未实现 (Yes)-webkit[1] 未实现
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (for SVG, only setting the mask image) 2.1-webkit (Yes) ? ? ? 3.2-webkit
Applies to HTML Elements ? ? ? ? ? ?
Shorthand for mask-* properties ? ? ? ? ? ?

[1] 而这个属性本身是经过验证的,值的应用没有任何影响。虽然也有webkit前缀的属性,可它使用在SVG和HTML中语法略有不同(也允许设置非标准的{ { cssxref(-webkit-mask-attachment)} }属性)。

[2] Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), the default color space when handling masks is sRGB; previously, the default (and only supported color space) was linearRGB. This changes the appearance of mask effects, but brings Gecko into compliance with the second edition of the SVG 1.1 specification.

[3] While the property itself is recognized, values applied to it don't have any effect. Though there is also a -webkit prefixed property, which can be used within SVG and HTML with a slightly different syntax (also allowing to set the non-standard -webkit-mask-attachment property).

[4] The shorthand version of the property is currently not implemented. It is only available in Nightly and Dev Edition. See bug 1251161.

See also

文档标签和贡献者

 此页面的贡献者: FE_dev, smilewalker
 最后编辑者: FE_dev,