mask
mask CSS 简写属性通过遮罩或剪裁指定区域来隐藏（部分或完全）一个元素。它是所有 mask-* 属性的简写。该属性接受一个或多个逗号分隔的值，每个值对应一个 <mask-layer>。
构成属性
此属性是以下 CSS 属性的简写：
语法
/* Keyword values */
mask: none;
/* Image values */
mask: url("mask.png"); /* Raster image used as mask */
mask: url("masks.svg#star"); /* SVG used as mask */
/* Combined values */
mask: url("masks.svg#star") luminance; /* Luminance mask */
mask: url("masks.svg#star") 40px 20px; /* Mask positioned 40px from the top and 20px from the left */
mask: url("masks.svg#star") 0 0/50px 50px; /* Mask with a width and height of 50px */
mask: url("masks.svg#star") repeat-x; /* Horizontally-repeated mask */
mask: url("masks.svg#star") stroke-box; /* Mask extends to the inside edge of the stroke box */
mask: url("masks.svg#star") exclude; /* Mask combined with background using non-overlapping parts */
/* Multiple masks */
mask:
url("masks.svg#star") left / 16px repeat-y,
/* 16px-wide mask on the left side */ url("masks.svg#circle") right / 16px
repeat-y; /* 16px-wide mask against right side */
/* Global values */
mask: inherit;
mask: initial;
mask: revert;
mask: revert-layer;
mask: unset;
值
<mask-layer>-
一个或多个逗号分隔的遮罩层，由以下部分组成
<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 简写属性隐藏了它所应用的元素的部分或全部。元素被隐藏、可见或部分显示的部分取决于遮罩的不透明度（alpha 通道）或亮度（luminance）。在 alpha 遮罩中，遮罩的不透明区域会显示元素，透明区域会隐藏元素。在亮度遮罩中，遮罩的亮色不透明区域会显示元素，暗色或透明区域会隐藏元素。
虽然并非所有构成的遮罩属性都需要声明，但任何被省略的值都会默认使用其初始值，即
mask-image: none;
mask-mode: match-source;
mask-position: 0% 0%;
mask-size: auto;
mask-repeat: repeat;
mask-origin: border-box;
mask-clip: border-box;
mask-composite: add;
在每个 <mask-layer> 中，mask-size 部分必须跟在 mask-position 值之后，并用正斜杠（/）分隔两者。
如果存在两个 <geometry-box> 值，第一个是 mask-origin 的值，第二个是 mask-clip 的值。如果存在一个 <geometry-box> 值和 no-clip 关键字，则 <geometry-box> 是 mask-origin 属性的值，因为 no-clip 仅对 mask-clip 属性有效。在这种情况下，这两个值的顺序无关紧要。如果只存在一个 <geometry-box> 值（没有指定 no-clip 关键字），这个值将同时用于 mask-origin 和 mask-clip 属性。
由于 mask 简写会将所有 mask-border-* 属性重置为其 initial 值，因此你应该在任何 mask 声明之后声明这些属性或 mask-border 简写。在你的声明块中设置 mask 时，你也隐式地设置了以下内容
mask-border-source: none;
mask-border-mode: alpha;
mask-border-outset: 0;
mask-border-repeat: stretch;
mask-border-slice: 0;
mask-border-width: auto;
因此，规范建议使用 mask 简写而不是各个组成属性来覆盖层叠中先前设置的任何遮罩。这能确保 mask-border 也被重置。
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 所有元素；在 SVG 中，它适用于除 <defs> 元素外的容器元素以及所有图形元素 |
| 继承性 | 否 |
| 百分比 | 作为简写中的每个属性
|
| 计算值 | 作为简写中的每个属性
|
| 动画类型 | 作为简写中的每个属性
|
| 创建层叠上下文 | 是 |
正式语法
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 |
<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 生成的重复锥形渐变作为遮罩源来遮罩图像。我们还将显示该渐变作为背景图像以进行比较。
HTML
<img
src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
alt="Pride flag" />
<div></div>
CSS
我们在 <img> 和 <div> 上设置了相同的 border、padding 和尺寸。
img,
div {
border: 20px dashed rebeccapurple;
box-sizing: content-box;
padding: 20px;
height: 220px;
width: 220px;
}
然后我们对 <img> 应用一个遮罩。mask-image 是使用 repeating-conic-gradient() 函数生成的。我们将其定义为一个 100px 乘 100px 的渐变，从图像的 content-box 的左上角开始重复。我们包含了两个 <geometry-box> 值；第一个设置 mask-origin，第二个定义 mask-clip 属性值。渐变从透明变为纯色的 lightgreen。我们使用 lightgreen 来证明重要的不是遮罩的颜色，而是其透明度。
img {
mask: repeating-radial-gradient(
circle,
transparent 0 5px,
lightgreen 15px 20px
)
content-box border-box 0% 0% / 100px 100px repeat;
}
最后，我们为 <div> 的 background 简写属性使用了与我们用于 mask 相同的值。
div {
background: repeating-radial-gradient(
circle,
transparent 0 5px,
lightgreen 15px 20px
)
content-box border-box 0% 0% / 100px 100px repeat;
}
结果
规范
| 规范 |
|---|
| CSS 蒙版模块 Level 1 # 遮罩 |
浏览器兼容性
加载中…