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

例子

使用ClippingMasking,您可以使元素的某些指定部分透明或不透明。两者都可以应用于任何 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将用作元素上的亮度蒙版