Skip to content
Related Articles

Related Articles

CSS mask-composite property
  • Last Updated : 11 Sep, 2020

The mask-composite property defines multiple composite operations to combine multi-mask layers. The first URL layer is at the top and the last URL layer is at the bottom of all the layers.

Syntax:

mask-composite: Keyword values
/* Or */
mask-composite: 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 add, subtract, intersect, exclude, 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-composite property using add :




<!DOCTYPE html>
<html>
  
    <head>
        <style>
  
        .geeks{
              width: 22%;
              height: 200px;
              background: green;
              -webkit-mask-image: 
                url("image.svg"), 
                url("image2.svg");
              -webkit-mask-size: 140px, 120px;
              -webkit-mask-position: 140px 60px, 50px;
              -webkit-mask-repeat: no-repeat;
              mask-composite: add;
        }
  
        </style>
    </head>
<body>
  
    <div class="geeks"></div>
  
</body>
</html>

Output:



Example 2: Below example illustrates the mask-composite property using subtract :




<!DOCTYPE html>
<html>
  
    <head>
        <style>
  
        .geeks{
              width: 22%;
              height: 200px;
              background: green;
              -webkit-mask-image: 
                url("image.svg"), 
                url("image2.svg");
              -webkit-mask-size: 140px, 120px;
              -webkit-mask-position: 140px 60px, 50px;
              -webkit-mask-repeat: no-repeat;
              mask-composite: subtract;
        }
  
        </style>
    </head>
<body>
  
    <div class="geeks"></div>
  
</body>
</html>

Output:

Browsers Supported:

  • Firefox
  • Chrome (Not Supported)
  • Opera (Not Supported)
  • Safari (Not Supported)
  • Edge (Not Supported)
  • 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 :