Open In App

CSS mask-position property

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads