CSS Masking - mask-composite Property

CSS mask-composite property defines how a mask image is composited with the element's background.

Possible Values

The property mask-composite can have one or more of the following keyword values, separated by comma.

  • add − Position the source above the destination.

  • subtract − Position the source so that it is outside of the destination.

  • intersect − Replace the destination with the parts of the source that overlap it.

  • exclude − Non-overlapping areas of source and destination do not overlap.

Here, source refers to the current mask layer, while all layers behind it are known as the destination.

Applies To

All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements.

Syntax

mask-composite: add | subtract | intersect | exclude;

CSS mask-composite - add Value

The following example demonstrates how the masks should be combined using the "add" composite mode. The final mask contains areas covered by both the mask images −

<html>
<head>
<style>
   .box {
      margin: 20px auto;
      display: block;
      width: 200px;
      height: 200px;
      background-color: red;
      -webkit-mask-image: url(images/book.png), url(images/heart.png);
      mask-image: url(images/book.png), url(images/heart.png);
      -webkit-mask-repeat: no-repeat, no-repeat;
      mask-repeat: no-repeat, no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-composite: add;
      mask-composite: add;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS mask-composite - subtract Value

The following example demonstrates how the mask-composite property with the subtract value. The overlapping areas of the two mask images should be subtracted from the background −

<html>
<head>
<style>
   .box {
      margin: 20px auto;
      display: block;
      width: 200px;
      height: 200px;
      background-color: red;
      -webkit-mask-image: url(images/book.png), url(images/heart.png);
      mask-image: url(images/book.png), url(images/heart.png);
      -webkit-mask-repeat: no-repeat, no-repeat;
      mask-repeat: no-repeat, no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-composite: subtract;
      mask-composite: subtract;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS mask-composite - intersect Value

The following example demonstrates how the mask-composite: intersect property defines the overlapping areas (intersection) of the two mask images −

<html>
<head>
<style>
   .box {
      margin: 20px auto;
      display: block;
      width: 200px;
      height: 200px;
      background-color: red;
      -webkit-mask-image: url(images/book.png), url(images/heart.png);
      mask-image: url(images/book.png), url(images/heart.png);
      -webkit-mask-repeat: no-repeat, no-repeat;
      mask-repeat: no-repeat, no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size:100% 100%;
      -webkit-mask-composite: intersect;
      mask-composite: intersect;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS mask-composite - exclude Value

The following example demonstrates that the mask-composite: exclude property defines the shape excluded from the two mask images −

<html>
<head>
<style>
   .box {
      margin: 20px auto;
      display: block;
      width: 200px;
      height: 200px;
      background-color: red;
      -webkit-mask-image: url(images/book.png), url(images/heart.png);
      mask-image: url(images/book.png), url(images/heart.png);
      -webkit-mask-repeat: no-repeat, no-repeat;
      mask-repeat: no-repeat, no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size:100% 100%;
      -webkit-mask-composite: exclude;
      mask-composite: exclude;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>
Advertisements