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

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

/* 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 也会重新设置为新的效果样式。

初始值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:
  • 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
Animation typeas each of the properties of the shorthand:
正规顺序per grammar
Creates stacking contextyes

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-originmask-clip。如果两个 <geometry-box> 值显示,第一个值代表 mask-origin 第二个值代表 mask-clip
<geometry-box> | no-clip
设置区域,会被遮罩图片影响。详见 mask-clip
<compositing-operator>
设置遮罩图层的组合操作。详见 mask-composite

正式语法

<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> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>
<length-percentage> = <length> | <percentage>
<shape-box> = <box> | margin-box

where
<image()> = image( <image-tags>? [ <image-src>? , <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()> | <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>

例子

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

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

 

规范

规范 状态 备注
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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Partial support 1
Notes
Partial support 1
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification.
IE No support NoOpera Partial support Partial
Notes
Partial support Partial
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Safari Partial support 4
Notes
Partial support 4
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
WebView Android Full support 2
Full support 2
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android ? Edge Mobile Full support YesFirefox Android Full support YesOpera Android ? Safari iOS Full support 3.2
Prefixed
Full support 3.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?
Applies to HTML elementsChrome Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge ? Firefox Full support 3.5IE No support NoOpera Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Shorthand for mask-* propertiesChrome Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge ? Firefox Full support 53IE No support NoOpera Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 53Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见

文档标签和贡献者

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