CSS mask-position property
The mask-position property sets the mask images within the mask positioning area by using the percentage or keywords values. There are always two values of mask-position (horizontal offset and vertical offset). If only one value is specified then the other one is assumed to be 50% or center.
Syntax:
mask-position: Keyword values
/* Or */
mask-position: position values
/* Or */
mask-position: Multiple values
/* Or */
mask-position: Global values
Property values: This property accepts values mentioned above and described below:
- Keyword values: This property value refers to the values defined with units like top, bottom, left, right, center, etc.
- Position values: This property value refers to the values defined with units like x% y%, where x and y are some integer.
- Multiple values: This property value refers to the values defined with units like top right, 2rem 2rem, center, etc.
- Global values: This property value refers to the values defined with units like inherit, initial, unset, etc.
Example 1: Below example illustrates the mask-position property using position-values
html
<!DOCTYPE html>
< html >
< head >
< style >
.Container {
border: 3px solid black;
background-color: rgb(136, 255, 0);
width: 30%;
height: 30vh;
}
.geeks {
width: 30%;
height: 200px;
background: green;
border: 10px solid red;
-webkit-mask-image:
url("image.svg");
-webkit-mask-repeat: no-repeat;
mask-position: 0.2rem 30%;
}
</ style >
</ head >
< body >
< div class = "Container" >
< div class = "geeks" ></ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: Below example illustrates the mask-position property using keyword-values
html
<!DOCTYPE html>
< html >
< head >
< style >
.Container {
border: 3px solid black;
background-color: rgb(136, 255, 0);
width: 30%;
height: 30vh;
}
.geeks {
width: 30%;
height: 200px;
background: green;
border: 10px solid red;
-webkit-mask-image:
url("image.svg");
-webkit-mask-repeat: no-repeat;
mask-position: top;
}
</ style >
</ head >
< body >
< div class = "Container" >
< div class = "geeks" ></ div >
</ div >
</ body >
</ html >
|
Output:
Browsers Supported:
- Chrome 1
- Safari 15.4
- Edge 79
- Firefox 53
- 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...