mask

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

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-positionmask-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-imagemask-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 */

maskmask-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-clipmask-origin 设置 <geometry-box>

mask-clipmask-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-originmask-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,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
1205312015.4

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712715.4

更多信息

技巧!