CSS 剪裁和遮罩：概述和区别

例子

使用Clipping和Masking，您可以使元素的某些指定部分透明或不透明。两者都可以应用于任何 HTML 元素。

剪辑是矢量路径。在这条路径之外，元素将是透明的，在它里面是不透明的。因此，您可以clip-path在元素上定义属性。SVG 中也存在的每个图形元素都可以在此处用作定义路径的函数。例子是circle(),polygon()或ellipse()。

例子

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

该元素将仅在此圆内可见，该圆位于元素的中心，半径为 100 像素。

蒙版类似于剪辑，但不是定义路径，而是定义元素上的蒙版。你可以把这个面具想象成一个主要由两种颜色组成的图像：黑色和白色。

亮度蒙版：黑色表示该区域不透明，白色表示透明，但也有一个半透明的灰色区域，因此您可以进行平滑过渡。

Alpha 蒙版：只有在蒙版的透明区域，元素才会不透明。

例如，此图像可用作亮度蒙版，使元素从右到左以及从不透明到透明的过渡非常平滑。

该mask属性可让您指定遮罩类型和用作图层的图像。

例子

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

在rectangle定义中调用的元素masks.svg将用作元素上的亮度蒙版。