CSS 属性

CSS mask-mode 属性指定是否应将 mask-image 给出的掩模引用视为亮度或 alpha 掩模。

属性值

  • alpha: 遮罩层图像的透明度值（Alpha 通道）用作遮罩值。

  • luminance: 掩模层图像的亮度值用作掩模值。

  • <match-source>: 当mask-image 属性设置为 <mask-source>，遮罩层图像的亮度值将用作遮罩值。

    当mask-image属性设置为<image>时，遮罩层图像的alpha值将用作遮罩值.

适用范围

所有元素。在 SVG 中，它适用于不包括 <defs> 元素和所有图形元素的容器元素。

语法

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

CSS mask-mode: 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(/css/images/bookmark.png);
      -webkit-mask-mode: alpha;
   }
</style>
</head>
<body>
   <img src="/css/images/pink-flower.jpg" alt="pink flower"></body>
</html>

CSS mask-mode: luminance

以下示例演示-webkit-mask-mode:luminance 属性将 mask-mode 设置为使用 mask 图像的亮度值 -

<html>
<head>
<style>
   .mask-container {
      width: 227px;
      height: 200px;
      background-image: url(/css/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>