CSS mask-mode 属性指定是否应将 mask-image 给出的掩码引用视为亮度蒙版还是 alpha 蒙版。
可能的值
- alpha − 蒙版层图像的透明度值（alpha 通道）用作蒙版值。
- luminance − 蒙版层图像的亮度值用作蒙版值。
- <match-source> −当mask-image属性设置为<mask-source>时，将使用mask层图像的亮度值作为mask值。当 mask-image 属性设置为 <image> 时，蒙版图层图像的 alpha 值将用作蒙版值。
适用于
所有元素。在 SVG 中，它适用于容器元素，不包括 <defs> 元素和所有图形元素。
语法
mask-mode: alpha |luminance | <match-source>
CSS 掩码模式 - alpha
以下示例演示了 -webkit-mask-mode： alpha 属性将掩码模式设置为使用掩码图像的 alpha 通道 -
<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 蒙版模式 - 亮度
以下示例演示了 -webkit-mask-mode： luminance 属性将 mask-mode 设置为使用掩码图像的亮度值 -
<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>
