css遮罩mask_使用mask-image属性在CSS中遮罩图像

css遮罩mask

We covered the use of the clip-path property for clipping using CSS, so it’s only natural that we now go over masking. Contrary to clipping, where a part of an image or element is either completely invisible or completely visible, with masking we can hide or show parts of an image with different levels of opacity.

我们讨论了使用clip-path属性进行CSS剪切的方法，因此现在自然而然地要遍历遮罩。 与剪裁相反，在剪裁中，图像或元素的一部分完全不可见或完全可见，通过遮罩，我们可以隐藏或显示具有不同透明度的图像部分。

Masking in CSS is done using the mask-image property, and an image has to be provided as the mask. Anything that’s 100% black in the image mask with be completely visible, anything that’s 100% transparent will be completely hidden, and anything in-between will partially mask the image. Linear and radial gradients in CSS are generated images, so they can be used as the image mask. SVGs that use the mask element can also be used as the image mask. Let’s go over the 3 possibilities for image masks with concrete examples:

CSS中的遮罩是使用mask-image属性完成的，必须提供图像作为遮罩。 图像遮罩中100％黑色的任何东西都是完全可见的，100％透明的任何东西都将被完全隐藏，中间的任何东西都将部分遮盖图像。 CSS中的线性和径向渐变是生成的图像，因此可以用作图像蒙版。 使用mask元素的SVG也可以用作图像蒙版。 让我们通过具体示例介绍一下图像蒙版的3种可能性：

使用渐变遮罩 (Masking Using Gradients)

Let’s first use a simple linear gradient that goes from transparent to black. The first image is our defau