剪下和遮蔽概述和差異

使用剪下和**蒙版，**你可以使元素的某些指定部分透明或不透明。兩者都可以應用於任何 HTML 元素。

剪裁

剪輯是向量路徑。在這條路徑之外，元素將是透明的，在其內部是不透明的。因此，你可以在元素上定義 clip-path 屬性。SVG 中也存在的每個圖形元素都可以在此處用作定義路徑的函式。例如 circle()，polygon() 或 ellipse()。

例

clip-path: circle(100px at center);

該元素僅在此圓圈內可見，該圓圈位於元素的中心，半徑為 100px。

掩蔽

掩碼類似於剪輯，但不是定義路徑，而是定義掩碼元素上的層。你可以把這個面具想象成一個主要由兩種顏色組成的影象：黑色和白色。

亮度遮罩 ：黑色表示區域是不透明的，白色表示透明，但也有一個半透明的灰色區域，因此你可以進行平滑過渡。

Alpha 蒙版 ：僅在蒙版的透明區域上，元素將是不透明的。

例如，該影象可以用作亮度掩模，以使元件從右到左和從不透明到透明非常平滑地過渡。

mask 屬性允許你指定掩碼型別和要用作圖層的影象。

例

mask: url(masks.svg#rectangle) luminance;

在 masks.svg 中定義的稱為 rectangle 的元素將用作元素上的亮度掩模。