關於遮罩

遮罩會隱藏主要元素的特定部分，實際效果取決於遮罩的形狀和透明程度。主要元素可以是圖片、Div、文字容器和元件。

每項元素只能含有一個遮罩，不過您可以將主要元素納入 Div，並把遮罩套用到容器 Div，藉此添加多個遮罩圖層。此外，您也可將其他元素加入主要元素中的巢狀結構，並把遮罩新增至子項元素。

本頁內容：

遮罩類型
選取遮罩
編輯遮罩
套用遮罩動畫
回應式版面配置中的遮罩

遮罩類型

圖片遮罩
漸層遮罩
裁剪路徑遮罩

瀏覽器相容性

Microsoft Edge 40 以下版本僅支援矩形的裁剪路徑遮罩，並會忽略其他的遮罩類型和形狀。

圖片遮罩

圖片遮罩可依圖片的透明區域隱藏主要元素。

如何新增圖片遮罩：

在您要套用遮罩的元素上按一下滑鼠右鍵。
在彈出式選單中選取 [新增圖片遮罩...]。
匯入或選取要當做遮罩使用的圖片。

您可以使用選取範圍工具或「屬性」面板來調整遮罩的大小和位置。

注意：圖片遮罩無法使用百分比定位。

漸層遮罩

漸層遮罩可透過各種透明程度的漸層隱藏主要元素。

Google Web Designer 支援下列兩種遮罩漸層：

線性漸層
放射漸層

如何新增漸層遮罩：

在您要套用遮罩的元素上按一下滑鼠右鍵。
在彈出式選單中選取 [新增漸層遮罩]。
按一下「屬性」面板中的漸層色票，自訂漸層的類型、色彩、透明度和角度 (最後一項僅適用於線性漸層)。

根據預設，漸層遮罩的大小與主要元素相同，但您可以透過選取範圍工具或「屬性」面板調整遮罩的位置和大小屬性。

注意：漸層遮罩無法使用百分比定位。

裁剪路徑遮罩

裁剪路徑遮罩可按照幾何形狀定義主要元素的顯示部分。

您可以點選並按住工具列中的裁剪路徑遮罩工具，在隨即顯示的彈出式選單內選取遮罩形狀類型：

矩形遮罩 (預設)
橢圓遮罩
多邊形遮罩

瀏覽器相容性

Internet Explorer 和 Microsoft Edge 僅支援矩形的裁剪路徑遮罩，您在指定這類遮罩的位置和大小時，須使用像素做為單位。如有遮罩是採用百分比做為單位或屬於其他形狀 (包括圓角化矩形遮罩)，這些瀏覽器會忽略該遮罩。
如果圓角半徑值較大 (與遮罩尺寸相比)，Firefox 和 Safari 可能無法正確顯示圓角化矩形遮罩。
Safari 不支援透過矩形工具繪製圖形的裁剪路徑遮罩。如要解決這個問題，請使用 div 元素 (而非矩形圖形)，並將遮罩置於 div 元素上。
當主要元素含有 3D 變形的子項元素時，Chrome 和 Opera 無法正確顯示裁剪路徑遮罩。
如果圓角化矩形遮罩的圓角半徑是以百分比為單位進行設定，這類遮罩在各種瀏覽器中的顯示情形可能會略有不同。

如何新增裁剪路徑遮罩：

選取您要套用遮罩的元素。
選取所需形狀的遮罩工具。
設定遮罩形狀的其他選項。
- 僅適用於矩形遮罩：如果是圓角化矩形遮罩，請在頂端的工具選項列中設定圓角半徑。如要讓四個圓角全都套用相同的半徑，請點選「保持相同比例」按鈕。
- 僅適用於多邊形遮罩：在頂端的工具選項列中選取所需形狀。您也可以點選 [任意形式] 選項，自行繪製形狀。如果您選取 [正多邊形] 選項，請視需求輸入多邊形的邊數。
在主要元素上繪製遮罩。
- 只要在繪製時按住 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 度)。