The mask-origin property sets the position of the mask image with respect to different components of the box model and The mask-origin property in CSS is used to specify the origin position of a CSS mask image applied to an element. It determines the starting point of the mask image within the element’s content box, allowing control over where the mask is positioned.
Syntax:
mask-origin: Keyword values
/* Or */
mask-origin: Multiple values
/* Or */
mask-origin: Non-standard keyword values
/* Or */
mask-origin: Global values
Property values: This property accepts the values mentioned above and described below:
- Keyword values: This property value refers to the values defined with units like content-box, padding-box, margin-box, border-box, fill-box, stroke-box, view-box, etc.
- Non-standard keyword values: This property value refers to the values defined with units like padding, border, content, etc.
- Multiple values: This property value refers to the values defined with units like padding-box, fill-box, view-box, border-box, etc.
- Global values: This property value refers to the values defined with units like inherit, unset, initial, etc
Example 1: Below is the example that illustrates the mask-origin property using border-box :
html
<!DOCTYPE html>
< html >
< head >
< style >
.geeks {
width: 22%;
height: 200px;
background: green;
border: 10px solid red;
padding: 10px;
color: white;
-webkit-mask-image:
url("image.svg");
-webkit-mask-repeat: repeat;
mask-origin: border-box;
}
</ style >
</ head >
< body >
< div class = "geeks" ></ div >
</ body >
</ html >
|
Output:
Example 2: Below is the example that illustrates the mask-origin property using content-box :
html
<!DOCTYPE html>
< html >
< head >
< style >
.geeks {
width: 22%;
height: 200px;
background: green;
border: 10px solid red;
padding: 10px;
color: white;
-webkit-mask-image:
url("image.svg");
-webkit-mask-repeat: repeat;
mask-origin: content-box;
}
</ style >
</ head >
< body >
< div class = "geeks" ></ div >
</ body >
</ html >
|
Output:
Browsers Supported:
- Chrome 1
- Firefox 53
- Safari 15.4
- Edge 79
- Opera 15
- Internet Explorer (Not Supported).
Last Updated :
08 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...