Skip to content
Related Articles

Related Articles

CSS mask-position property
  • Last Updated : 01 Oct, 2020

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




<!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




<!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.
  • Safari.
  • Edge.
  • Firefox.
  • Opera.
  • Internet Explorer (Not Supported).

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :