剪切和屏蔽概述和差异

使用剪切和**蒙版，**你可以使元素的某些指定部分透明或不透明。两者都可以应用于任何 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 的元素将用作元素上的亮度掩模。