mask

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;
*/

示例

以下示例在图像顶部使用两个蒙版层

浏览器支持

更多信息

技巧！

相关