CSS mask-origin Property
Example
.example {
background: green;
-webkit-mask-image: url(hello-world.png);
mask-image: url(hello-world.png);
-webkit-mask-origin: border-box;
mask-origin: border-box;
}Meaning
The mask-origin property sets the origin of a mask.
| Default value: | border-box |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
mask-origin: content-box|padding-box|border-box|margin-box|fill-box|stroke-box|view-box|content|padding|border|initial|inherit|revert|revert-layer|unset;Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| content-box | The position is relative to the content box. |
| padding-box | The position is relative to the padding box. For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner. |
| border-box | The position is relative to the border box. |
| margin-box | The position is relative to the margin box. |
| fill-box | The position is relative to the object bounding box. |
| stroke-box | The position is relative to the stroke bounding box. |
| view-box | Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute. |
| content | Same as content-box. |
| padding | Same as padding-box. |
| border | This is default. Same as border-box. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
mask-origin: border-box;
}More Examples
This is the mask image:
And this is an image of flowers:
After apply the mask image as the mask layer for the image flowers:
Example
<style type="text/css">
img {
-webkit-mask-image: url(hello-world.png);
mask-image: url(hello-world.png);
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
</style>
<img src="flowers.jpg" width="200" height="200">