CSS mask-image

The mask-image CSS property is used to specify an image that acts as a mask or stencil for the elements it is applied to. This property is used in conjunction with the mask-mode property to define how the image should be used as a mask.

To apply a mask to an element, you can use the following CSS syntax:

.element {
    mask-image: url('mask.png');
    mask-mode: alpha;
}

In this example, the mask-image property specifies that the image mask.png should be used as the mask for the element with the class element. The mask-mode property specifies that the alpha values of the mask image should be used to determine which parts of the element are visible.

In the example above, the text "Hello, CSS mask-image!" is displayed within an element with the class element. The mask-image property is used to apply the mask image mask.png to the element, and the mask-mode property is used to specify that the alpha values of the mask image should be used to determine visibility.