遮罩简介

遮罩会根据形状或透明度隐藏主元素的一部分。主元素可以是图片、div、文本框和组件。

每个元素只能有一个遮罩，但是您可以将主元素封装到一个 div 中并为容器 div 应用遮罩，从而实现多个遮罩的叠加。您还可以在主元素中嵌套另一个元素，并为该子元素添加遮罩。

此页将介绍以下内容：

遮罩类型
选择遮罩
修改遮罩
为遮罩添加动画效果
自适应布局中的遮罩

遮罩类型

图片遮罩
渐变遮罩
裁剪路径遮罩

浏览器兼容性

Microsoft Edge 40 及更低版本仅支持矩形裁剪路径遮罩。其他类型和形状的遮罩将被忽略。

图片遮罩

图片遮罩会根据图片的透明区域来隐藏主元素。

要添加图片遮罩，请按以下步骤操作：

右键点击要遮罩的元素。
从弹出式菜单中选择添加图片遮罩…。
导入或选择要用作遮罩的图片。

您可以使用“选择”工具或“属性”面板调整遮罩的尺寸和位置。

注意：图片遮罩无法通过百分比值确定位置。

渐变遮罩

渐变遮罩根据透明度的渐变情况隐藏主元素。

Google Web Designer 支持两种遮罩渐变效果：

线性渐变
径向渐变

要添加渐变遮罩，请按以下步骤操作：

右键点击要遮罩的元素。
从弹出式菜单中选择添加渐变遮罩。
在“属性”面板中点击渐变样本，自定义渐变类型、颜色、不透明度和角度（仅适用于线性渐变）。

默认情况下，渐变遮罩的尺寸与主元素的尺寸相同，但您可以使用“选择”工具或“属性”面板调整遮罩的位置和尺寸属性。

注意：渐变遮罩无法通过百分比值确定位置。

裁剪路径遮罩

裁剪路径遮罩用几何形状定义要显示主元素的哪个部分。

您可以点击并按住工具栏中的裁剪路径遮罩工具，直到系统显示一个弹出式菜单，然后在其中选择遮罩形状的类型：

矩形遮罩（默认）
椭圆形遮罩
多边形遮罩

浏览器兼容性

Internet Explorer 和 Microsoft Edge 仅支持以像素为单位指定位置和尺寸的矩形裁剪路径遮罩。基于百分比的遮罩和其他形状的遮罩（包括带圆角的矩形遮罩）将被忽略。
Firefox 和 Safari 可能无法正确呈现圆角半径值较大（与遮罩尺寸相比）的矩形遮罩。
Safari 不支持在使用矩形工具绘制的形状上放置裁剪路径遮罩。若要解决此问题，可以使用 div 元素（而非矩形），并将遮罩放置在 div 元素上。
在 Chrome 和 Opera 中，当主元素包含经过 3D 转换的子元素时，裁剪路径遮罩将无法正确呈现。
如果矩形遮罩有使用百分比半径设置的圆角，在不同浏览器中的呈现效果可能会略有不同。

若要添加裁剪路径遮罩，请执行以下操作：

选择要遮罩的元素。
选择与所需形状对应的遮罩工具。
设置遮罩形状的其他选项。
- 仅限矩形遮罩：对于圆角，请在顶部的工具选项栏中设置角半径。如需对所有 4 个角使用相同的半径，请使用保持相同 按钮。
- 仅限多边形遮罩：从顶部的工具选项栏中选择所需的形状。如需绘制您自己的形状，请使用自由形式选项。如果您选择正多边形选项，请输入所需的多边形边数。
在主元素上绘制遮罩。
- 在绘制时按住 Shift 键，可以使遮罩的宽度和高度保持相同。按住 Shift 键不会影响自由形式的遮罩或某些预设形状，这些形状将始终采用等长的边进行绘制：三角形、菱形、五边形、六边形和星形。
- 按住 Alt 键可使用初始绘制位置作为遮罩的中心点。

注意：在绘制多边形遮罩后，您可以通过拖动每个顶点来更改遮罩形状，但无法更改边数。

多边形遮罩形状

	自由形式（绘制您自己的形状）
	正多边形（设置边数；绘制的边具有相同的长度）
	三角形
	矩形
	框架
	菱形
	五边形
	六边形
	> 形箭号
	< 形箭头
	交叉形
	星形
	向右箭头
	向左箭头

选择遮罩

在场景中：选择主元素，然后点击遮罩。遮罩将出现绿色轮廓。
在高级模式时间轴中：选择主元素层下的遮罩层。遮罩层的层名称前面带有符号。

您可以在高级模式时间轴中隐藏和锁定遮罩层，以便更轻松地处理主元素。

选择多个遮罩

在高级模式时间轴中，在按下 Ctrl 键的同时点击选择多个遮罩层，以便一次性删除所有遮罩层。一次只能修改一个遮罩。

只有当所选内容包含遮罩的主元素时，才能同时删除元素和遮罩。

修改遮罩

您可以直接在场景中修改遮罩，也可以通过“属性”面板进行修改。“CSS”面板中不提供遮罩的 CSS 属性。

可以通过以下方式修改遮罩：

剪切、复制和粘贴遮罩
移动遮罩
调整遮罩尺寸
旋转遮罩
更改图片遮罩的来源
更改渐变遮罩的渐变效果
更改矩形遮罩的角曲度
更改多边形遮罩的形状

剪切、复制和粘贴遮罩

您可以剪切或复制遮罩，然后将其粘贴到另一个元素甚至是另一个文档中，可用的方法如下：

在场景中或在高级模式时间轴中：
- 右键点击相应遮罩，然后选择剪切或复制。
- 右键点击要遮罩的元素，然后选择粘贴或替换遮罩。
在高级模式时间轴中：
- 将遮罩层拖动到某个元素层，即可将相应遮罩切换到另一个主元素（不适用于替换遮罩）。
- 按住 Alt 键的同时拖动遮罩层，即可将相应遮罩复制到另一个元素（不适用于替换遮罩）。
键盘快捷键：
- 剪切 — Ctrl+X (Windows) 或 ⌘+X (Mac)
- 复制 — Ctrl+C (Windows) 或 ⌘+C (Mac)
- 粘贴 — Ctrl+V (Windows) 或 ⌘+V (Mac)
菜单命令：
- 修改 > 剪切
- 修改 > 复制
- 修改 > 粘贴或替换遮罩

将会一并粘贴所有遮罩动画。

复制和粘贴遮罩方面的限制

在剪切或复制遮罩时，只能选择一个遮罩；在粘贴遮罩时，也只能选择一个目标元素。
如果将遮罩粘贴到已有遮罩的元素，则会替换其现有遮罩。
在媒体规则中，无法剪切、复制或粘贴遮罩。

移动遮罩

选择要移动的遮罩，然后使用下列方法之一：

在属性面板中修改顶部和左侧位置属性。这些值相对于主元素的左上角。
使用箭头键可将遮罩一次移动 1 个像素的距离。在按住 Shift 键的同时按一下箭头键，可将遮罩移动 10 个像素的距离。
通过“选择”工具，可使用鼠标拖动遮罩。按住 Shift 键的同时进行拖动，可仅沿单个轴移动遮罩。

遮罩可放置在其主元素的边界之外。

注意：图片遮罩和渐变遮罩无法通过百分比值确定位置。

调整遮罩尺寸

选择要调整哪个遮罩的尺寸，然后：

在属性面板中修改宽度和高度属性。
使用“选择工具”，并在顶部的工具选项栏中启用转换控件选项。
- 在拖动时按住 Shift 键，可使宽高比保持不变。
- 在拖动时按住 Alt (Windows) 或 Option (Mac) 键，可调整遮罩大小，而不更改中心点。

旋转遮罩

遮罩不能直接旋转，但是您可以在添加遮罩之前通过以下步骤来达到旋转效果：

封装要遮罩的元素。
将遮罩添加到容器 div 中。
旋转容器 div，遮罩也会跟着旋转。
沿相反方向旋转原始元素。

更改图片遮罩的来源

您可以按照以下步骤替换用于图片遮罩的图片：

选择遮罩。
在属性面板中，点击来源字段中的设置图片遮罩按钮。
从图库中选择一张图片，或点击导入素材资源 按钮来使用其他图片。
点击确定。

更改渐变遮罩的渐变效果

您可以自定义用于渐变遮罩的渐变效果。

选择遮罩。
在属性面板中，点击渐变色样。
修改渐变效果：
- 渐变类型：选择线性渐变 或径向渐变 按钮。
- 过渡距离：沿着渐变条顶部拖动透明度标记，可更改过渡距离。
- 透明度：透明度标记用于设定渐变路径上某个点处的不透明度。100% 表示主元素完全可见，0% 表示主元素完全隐藏。点击透明度标记，可在右侧的百分比字段中修改其不透明度。
- 其他透明度标记：要添加更多透明度标记，请点击渐变条。要移除透明度标记，请将其向下拖动。
- 角度：对于线性渐变，您可以调整角度。
- 默认：点击默认渐变 按钮，可将渐变重置为默认设置（从 0% 至 100% 的线性渐变，且角度为 90 度）。