The mask-origin
property designates the origin position – the mask position area – of a mask layer image.
Example:
div.ex {
mask-image: url(path-to-image.jpg);
mask-origin: content-box;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 80%;
}
border-box
Default value. The position of the mask layer image is relative to the border box.
content-box
The position of the mask layer image is relative to the content box.
padding-box
The position of the mask layer image is relative to the padding box.
margin-box
The position of the mask layer image is relative to the margin box.
fill-box
The position of the mask layer image is relative to the object bounding box.
stroke-box
The position of the mask layer image is relative to the stroke bounding box.
view-box
Uses the nearest SVG viewport as reference box.
initial
Sets the property to its default value.
inherit
Inherits this property’s value from its parent item.
Have a code example of mask-origin
? Submit a codepen.io demo and we'll showcase it here ↴