DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费额度!
mask
属性是用于指定所有 mask-*
属性的简写形式。 mask
可以隐藏应用于它的元素的一部分,它接受一个或多个用逗号分隔的值,其中每个值对应一个蒙版层。
.element {
mask: url(mask.png) right bottom / 100px repeat-y;
}
mask
包含在 CSS 蒙版模块 1 规范中。
语法
mask: <mask-layer>#
where
<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>
- 初始值: 请参见各个属性。
- 应用于: 所有元素。 在 SVG 中,它应用于不带
<defs>
元素的容器元素、所有图形元素和<use>
元素。 - 继承: 否
- 动画类型: 只有
mask-position
和mask-size
属性可以进行动画处理。
值
/* General examples */
mask: none;
mask: url(mask.svg);
mask: url(mask.png) luminance;
mask: url(mask.png) 100px 200px;
mask: url(mask.png) 100px 200px/50px 100px;
mask: url(mask.png) repeat-x;
mask: url(mask.png) 50% 50% / contain no-repeat border-box luminance;
/* Global values */
mask: inherit;
mask: initial;
mask: unset;
/* Multiple masks */
mask: url(mask.png) luminance center repeat-y exclude,
linear-gradient(black, transparent);
mask
属性接受以下值,每个值都取 mask
成分属性的值,包括
值 | 属性 | 它做了什么 | 演示 |
---|---|---|---|
<mask-reference> | mask-image | 设置用作元素蒙版层的图像。 | CodePen |
<masking-mode> | mask-mode | 指示 CSS 蒙版层图像是否被视为 alpha 蒙版或亮度蒙版。 | CodePen |
<position> | mask-position | 指定蒙版层图像相对于蒙版位置区域的初始位置。 | CodePen |
<bg-size> | mask-size | 指定蒙版层图像的大小。 | CodePen |
<repeat-style> | mask-repeat | 告诉蒙版是否应该重复以及在哪些方向重复。 | CodePen |
<geometry-box> | mask-origin | 指定蒙版层图像的蒙版位置区域。 换句话说,它定义了蒙版层图像的原点在哪里,无论是 边框、填充或内容框的边缘。 | CodePen |
mask-clip | 确定受蒙版影响的区域。 元素的绘制内容必须限制在这个区域内。 | CodePen | |
<compositing-operator> | mask-composite | 允许我们将蒙版层图像与下面的蒙版层组合。 | CodePen |
并非所有值都需要在简写形式中声明
mask
简写属性分配显式值并将丢失的属性设置为其初始值。 在以下示例中,我们使用 mask
属性简写形式仅指定 mask-image
和 mask-repeat
属性的值
.element {
mask: url(mask.png) repeat-x;
}
这等效于以下内容
.element {
mask-image: url(mask.png);
mask-mode: match-source; /* initial value */
mask-position: center; /* initial value */
mask-size: auto; /* initial value */
mask-repeat: repeat-x;
mask-origin: border-box; /* initial value */
mask-clip: border-box; /* initial value */
mask-composite: add; /* initial value */
}
值的顺序有点重要
mask
简写形式中的值可以按您喜欢的任何顺序排列,但 mask-size
属性值除外。 该值必须放在 mask-position
属性值之后,并且这两个值需要用正斜杠 (/
) 分隔。
mask: url(mask.png) 120px 30px; /* mask-position */
mask: url(mask.png) 100px 200px / 50px 100px; /* mask-position / mask-size */
mask: url(mask.png) contain no-repeat; /* Invalid declaration */
mask
将 mask-border
重置为其初始值
您可能在到目前为止的示例中没有看到 mask-border
,但它仍在后台执行某些操作,因为 mask
会将 mask-border
重置为其初始值。 请记住,mask-border
也是一个简写属性,因此以下是如何分解它
mask-border-mode: alpha
mask-border-outset: 0
mask-border-repeat: stretch
mask-border-slice: 0
mask-border-source: none
mask-border-width: auto
因此,规范建议 使用 mask
而不是各个属性来覆盖级联中较早出现的蒙版设置。 这样,mask-border
属性也能够正确地重置为其初始值,从而使后来声明的样式按预期工作。
mask-clip
和 mask-origin
设置 <geometry-box>
值
使用 mask-clip
和 mask-origin
都接受 <geometry-box>
值。 因此,有一些需要注意的地方。
首先,如果有一个 <geometry-box>
值和 no-clip
关键字,那么
mask-origin
是<geometry-box>
mask-clip
设置为no-clip
mask: url(mask.png) content-box no-clip;
/**
mask-origin: content-box;
mask-clip: no-clip;
*/
如果只有一个 <geometry-box>
值,但没有 no-clip
关键字,则 mask-origin
和 mask-clip
都设置为 <geometry-box>
值。
mask: url(mask.png) content-box;
/**
mask-origin: content-box;
mask-clip: content-box;
*/
两个 <geometry-box>
值呢?
- 第一个设置
mask-origin
- 第二个设置
mask-clip
mask: url(mask.png) content-box border-box;
/**
mask-origin: content-box;
mask-clip: border-box;
*/
示例
以下示例在图像顶部使用两个蒙版层
浏览器支持
这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
120 | 53 | 否 | 120 | 15.4 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 15.4 |
更多信息
技巧!
如何进行剔除文字
CSS 文字剔除技巧和效果
使用 CSS 剪切和遮罩实现完美的工具提示
使用 CSS 遮罩创建锯齿状边缘
使用 CSS 遮罩和自定义属性创建图像碎片效果
使用循环视频实现响应式文字剔除
将一个元素编织到另一个元素之上和之下
相关
mask-clip
.element { mask-clip: padding-box; }
mask-composite
.element { mask-composite: subtract; }
mask-image
.element { mask-image: url(star.svg); }
mask-mode
.element { mask-mode: alpha; }
mask-origin
.element { mask-origin: content-box; }
mask-position
.element { mask-position: 20px center; }
mask-repeat
.element { mask-repeat: repeat-y; }
mask-size
.element { mask-size: 200px 100px; }
mask-type
.element { mask-type: alpha; }