CSS Masking - mask-mode Property

CSS mask-mode property specifies whether the mask reference given by mask-image should be considered as a luminance or alpha mask.

Possible Values

  • alpha − The transparency values (alpha channel) of the mask layer image are used as mask values.

  • luminance − The luminance values of the mask layer image are used as mask values.

  • <match-source> − When the mask-image property is set to <mask-source>, the luminance values of the mask layer image will be used as the mask values.

    When the mask-image property is set to <image>, the alpha values of the mask layer image will be used as the mask values.

Applies to

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

Syntax

mask-mode: alpha |luminance | <match-source>

CSS mask-mode - alpha

The following example demonstrates that the -webkit-mask-mode: alpha property sets the mask mode to use the alpha channel of the mask image −

<html>
<head>
<style>
   img {
      width: 200px;
      height: 200px;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100%;  
      -webkit-mask-image: url(images/bookmark.png);
      -webkit-mask-mode: alpha;
   }
</style>
</head>
<body>
   <img src="images/pink-flower.jpg" alt="pink flower"></body>
</html>

CSS mask-mode - luminance

The following example demonstrates that the -webkit-mask-mode: luminance property sets the mask-mode to use the luminance values of the mask image −

<html>
<head>
<style>
   .mask-container {
      width: 227px;
      height: 200px;
      background-image: url(images/pink-flower.jpg);
      background-size: cover;
      -webkit-mask-image: linear-gradient(red, blue, yellow, transparent);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-mode: luminance;
   }
</style>
</head>
<body>
   <div class="mask-container"></div>
</body>
</html>
Advertisements