Masking

CSS masking is the process of placing an element inside or over another element, such that all or partial parts of the element is hidden or visible.

Masking Properties

mask-image - specifies the image to be used for the mask layer of the element.

mask-repeat - specifies the repetition mode of the image in the mask layer

mask-size - specifies the size (width and height) of the image in the mask layer.

• It takes values like: contain, cover, auto, initial and inherit.

mask-position - specifies the position of the image in the mask layer

• It takes values like: bottom, right, top, center, initial, inherit, %, px

mask-origin - specifies the starting point of the image in the mask layer.

• It takes the values: border-box, content-box, padding-box,, fill-box, stroke-box, view-box, initial and inherit.

mask-mode - specifies whether the image in the mask layer should be treated as luminance mask.

• It takes the values: match-source, luminance, alpha, initial and inherit.

mask-clip - specifies which image should be affected by the mask image.

• It takes the values: border-box, content-box, padding-box,, fill-box, stroke-box, view-box, no-clip, border, padding, content, text, initial and inherit.

mask-composite - specifies the compounding operation used in the amount of mask layer with the mask layers that is below it.

• It takes the values: add, subtract, intersect, exclude, initial and inherit.

mask-type - specifies whether the SVG mask element should be treated as a luminance or alpha mask.

• It takes the values: luminance, alpha, initial and inherit.