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>
To Continue Learning Please Login
Login with Google