mask | CSS

在此页

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

mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

As well as the properties listed below, the mask shorthand also resets mask-border to its initial value. It is therefore recommended to use the mask shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. This will ensure that mask-border has also been reset to allow the new styles to take effect.

组成特性

此特性是下列 CSS 特性的简写：

句法

/* 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;
/* Multiple masks */
mask: url(masks.svg#star) left / 16px repeat-y,    /* Element within SVG graphic is used as a mask on the left-hand side with a width of 16px */
      url(masks.svg#circle) right / 16px repeat-y; /* Element within SVG graphic is used as a mask on the right-hand side with a width of 16px */

值

<mask-reference>: Sets the mask image source. See mask-image .
<masking-mode>: Sets the masking mode of the mask image. See mask-mode .
<position>: Sets the position of the mask image. See mask-position .
<bg-size>: Sets the size of the mask image. See mask-size .
<repeat-style>: Sets the repetition of the mask image. See mask-repeat .
<geometry-box>: If only one <geometry-box> value is given, it sets both mask-origin and mask-clip . If two <geometry-box> values are present, then the first sets mask-origin and the second sets mask-clip .
<geometry-box> | no-clip: Sets the area that is affected by the mask image. See mask-clip .
<compositing-operator>: Sets the compositing operation used on the current mask layer. See mask-composite .

形式定义

初始值	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`
适用于	all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements
继承	no
百分比	as each of the properties of the shorthand: `mask-position` : refer to size of mask painting area minus size of mask layer image (see the text for `background-position` )
计算值	as each of the properties of the shorthand: `mask-image` : as specified, but with `<url>` values made absolute `mask-mode` ：如指定 `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` ：如指定 `mask-origin` ：如指定 `mask-size` : as specified, but with relative lengths converted into absolute lengths `mask-composite` ：如指定
动画类型	as each of the properties of the shorthand: `mask-image` : discrete `mask-mode` : discrete `mask-repeat` : discrete `mask-position` : repeatable list of simple list of length, percentage, or calc `mask-clip` : discrete `mask-origin` : discrete `mask-size` : repeatable list of simple list of length, percentage, or calc `mask-composite` : discrete
Creates stacking context	yes

形式句法

<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()> | <paint()> | <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> )
<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>

范例

Masking an image

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

规范

规范	状态	注释
CSS Masking Module Level 1 The definition of 'mask' in that specification.	候选推荐	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) The definition of 'mask' in that specification.	推荐	初始定义。

浏览器兼容性

更新 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`	Chrome 部分支持 1 注意事项部分支持 1 注意事项注意事项 While the property is recognized, values applied to it don't have any effect. 完整支持 1 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` 特性。	Edge 完整支持 12	Firefox 完整支持 2 注意事项完整支持 2 注意事项注意事项 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	Opera 部分支持 15 注意事项部分支持 15 注意事项注意事项 While the property is recognized, values applied to it don't have any effect. 完整支持 15 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` 特性。	Safari 部分支持 3.2 注意事项部分支持 3.2 注意事项注意事项 While the property is recognized, values applied to it don't have any effect. 完整支持 3.2 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` 特性。	WebView Android 部分支持 2 注意事项部分支持 2 注意事项注意事项 While the property is recognized, values applied to it don't have any effect. 完整支持 2 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` 特性。	Chrome Android 部分支持 18 注意事项部分支持 18 注意事项注意事项 While the property is recognized, values applied to it don't have any effect. 完整支持 18 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` 特性。	Firefox Android 完整支持 4 注意事项完整支持 4 注意事项注意事项 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.	Opera Android 部分支持 14 注意事项部分支持 14 注意事项注意事项 While the property is recognized, values applied to it don't have any effect. 完整支持 14 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` 特性。	Safari iOS 部分支持 3.2 注意事项部分支持 3.2 注意事项注意事项 While the property is recognized, values applied to it don't have any effect. 完整支持 3.2 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` 特性。	Samsung Internet Android 部分支持 1.0 注意事项部分支持 1.0 注意事项注意事项 While the property is recognized, values applied to it don't have any effect. 完整支持 1.0 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard `-webkit-mask-attachment` 特性。

图例

完整支持
部分支持
不支持
见实现注意事项。
要求使用供应商前缀或不同名称。

另请参阅

元数据

最后修改： Aug 19, 2020

在此页