CSS mask-mode 属性

CSS mask-mode 语法

在 CSS 中，mask-mode 属性用于定义蒙版图像的渲染模式。

语法：

mask-mode: 关键字;

说明：

mask-mode 的取值是一个关键字，常用取值有 3 种。

match-source：根据蒙版资源的类型自动决定。
- 如果是 SVG mask 元素，则使用该元素的 mask-type 属性值。。
- 如果是图像（如 JPG、PNG），则默认使用 alpha 通道。
alpha：表示将使用蒙版图像的 “alpha（透明度）通道” 来生成蒙版，针对的是 PNG、SVG 等包含 alpha 通道的图像。
- 蒙版图像中完全透明的部分（alpha 值为 0）会完全隐藏元素的内容。
- 蒙版图像中完全不透明的部分（alpha 值为 1）会完全显示元素的内容。
- 蒙版图像中半透明的部分会以相应的透明度显示元素内容。
luminance：表示将使用蒙版图像的 “亮度值” 来生成蒙版。
- 蒙版图像中完全黑色的部分（亮度最低）会完全隐藏元素的内容。
- 蒙版图像中完全白色的部分（亮度最高）会完全显示元素的内容。
- 蒙版图像中灰色调的部分会以相应的透明度显示元素内容（亮度越高，越透明，内容越可见；亮度越低，越不透明，内容越隐藏）。

提示:

mask-mode 属性适用于所有元素。
为了更好的浏览器兼容性，建议在使用时添加浏览器前缀（如 -webkit-mask-mode），尤其是在旧版浏览器中。

CSS mask-mode 摘要

属于	CSS 蒙版属性
使用频率	中
是否继承	否
默认值	match-source
兼容性	查看
官方文档	查看
MDN	查看

CSS mask-mode 示例

接下来，我们通过几个简单的例子来讲解一下 CSS mask-mode 属性是如何使用的。

示例 1：mask-mode: alpha;

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 50px;

            /* 定义背景图片 */
            background-image: url("imgs/bird.jpg");
            background-size: cover;

            /* 定义蒙版图片 */
            mask-image: url("imgs/star.svg");
            mask-mode: alpha;
            mask-repeat: no-repeat;   /* 不重复 */
            mask-position: center;    /* 蒙版居中 */
            mask-size: 100%;          /* 蒙版尺寸 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

mask-mode: alpha;

分析：

在这个例子中，mask-image 使用了一个星形 SVG 图片作为蒙版，该图片中心区域是灰色的，而边缘区域是透明的，如下图所示。

由于我们设置了 mask-mode: alpha;，此时浏览器会默认使用 alpha（透明度）模式来解释它。因此，div 的背景图片只会在蒙版图像的不透明（星形）区域显示，透明区域的内容则会被隐藏。

示例 2：mask-mode: luminance;

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 50px;

            /* 定义背景图片 */
            background-image: url("imgs/bird.jpg");
            background-size: cover;

            /* 定义蒙版图片 */
            mask-image: url("imgs/circle.jpg");
            mask-mode: luminance;
            mask-repeat: no-repeat;   /* 不重复 */
            mask-position: center;    /* 蒙版居中 */
            mask-size: 100%;          /* 蒙版尺寸 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

mask-mode: luminance;

分析：

在这个例子中，mask-image 使用了一个圆形 JPG 图片作为蒙版，该图片中心区域是白色的，而边缘区域是黑色的，如下图所示。

circle

然后我们设置了 mask-mode: luminance;，此时浏览器会根据蒙版图像的 “亮度值” 来生成蒙版。其中，黑色的部分（亮度最低）会完全隐藏元素的内容，而白色的部分（亮度最高）会完全显示元素的内容。

mask 是一个复合属性

在 CSS 中，mask 是一个复合属性，它包含很多子属性（如下表所示）。

mask 子属性
子属性	说明
mask-image	指定用作蒙版的图像
mask-mode	定义蒙版图像的渲染模式
mask-repeat	定义蒙版图像的重复方式
mask-position	定义蒙版图像的起始位置
mask-size	定义蒙版图像的尺寸大小
mask-origin	定义蒙版图像的定位原点
mask-clip	定义蒙版图像的裁剪区域
mask-composite	定义多个蒙版图像之间的合成模式