Loading lesson path
CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element.
Formula
mask - image property specifies a mask layer image.The mask layer image can be a PNG image, an SVG image, a CSS gradient, or an
Formula
SVG < mask > element.Use a PNG Image as the Mask Layer To use a PNG image as the mask layer, use a url() value to pass in the mask layer image.
Formula
The mask image needs to have a transparent or semi - transparent area. Black indicates fully transparent.Here is the mask image ("w3logo.png") we will use: Here is an image from Cinque Terre, in Italy: Now, we apply the mask image as the mask layer for the image from Cinque Terre, Italy:
Here is the source code:.mask1 {
-webkit-mask-image: url(w3logo.png);Formula
mask - image:url(w3logo.png);
mask-repeat: no-repeat;
}Formula
The mask - image property specifies the image to be used as a mask layer for an element.The mask-repeat property specifies if or how a mask image will be repeated. The no-repeat value indicates that the mask image will not be repeated (the mask image will only be shown once).
Formula
If we omit the mask - repeat property, the mask image will be repeated all over the image from Cinque Terre, Italy:Formula
Omit the mask - repeat property:.mask1 {-webkit-mask-image: url(w3logo.png);Formula
mask - image:url(w3logo.png);
}Formula
The mask - position property sets the starting position of a mask image(relative to the mask position area). By default, a mask image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Here, we position the mask image in center:
Position the mask layer image:.mask1 {
-webkit-mask-image: url(w3logo.png);Formula
mask - image:url(w3logo.png);
mask-repeat: no-repeat;Formula
mask - position:center;
}The following table lists all the CSS masking properties:
Formula
Specifies which area is affected by a mask image mask - composite
Specifies a compositing operation used on the current mask layer with the mask layers below it mask - image
Specifies an image to be used as a mask layer for an element mask - mode
Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask mask - origin
Specifies the origin position (the mask position area) of a mask layer image mask - positionSets the starting position of a mask layer image (relative to the mask position area)
Formula
mask - repeat
Specifies how the mask layer image is repeated mask - size
Specifies the size of a mask layer image mask - type
Specifies whether an SVG < mask > element is treated as a luminance mask or as an alpha mask