CSS 遮罩

CSS 遮罩 (masking) 模組定義了遮罩 (masking) 和剪裁 (clipping)，這兩種不同的圖形操作用於部分或完全隱藏視覺元素的某些部分。

剪裁 (Clipping) 涉及將一個閉合的向量路徑、形狀或多邊形定義為剪裁路徑。剪裁路徑區域內的所有內容保持可見，而外部的所有內容都被隱藏或“剪裁掉”。clip-path 屬性指定一個<basic-shape> 或引用一個 SVG <clipPath> 元素作為剪裁路徑。

CSS 遮罩 (masking) 屬性用於對元素或其邊框應用遮罩。然後，一個圖形物件被繪製到背景或邊框上，根據遮罩的不透明度或亮度，完全或部分遮蓋元素或其邊框的部分。

用作遮罩的影像由mask-image 或 mask-border-source 屬性指定。指定的遮罩可以是<image>、<gradient> 或 SVG <mask> 元素。遮罩可以像背景和邊框影像一樣進行尺寸調整和定位。

CSS 中的剪裁和遮罩行為與 SVG 中相同：首先，元素在沒有濾鏡效果、遮罩、剪裁和不透明度的情況下進行樣式設定。然後，按照以下順序將任何效果應用於元素：濾鏡效果、剪裁、遮罩和不透明度。

雖然遮罩提供了更多的控制和選項，但如果只需要一個基本形狀，剪裁可以表現得更好——它們更容易進行插值。