CSS mask 语法
在 CSS 中，mask 属性允许你通过图像（或 SVG 路径、渐变等）作为遮罩层，来控制元素的可见区域。
就像现实中的模板或镂空卡纸，只有图像中 “亮 / 不透明” 的部分才能显示元素内容，其余部分都被遮挡隐藏。
语法：
mask: 蒙版层1, 蒙版层2, ..., 蒙版层n;说明：
mask 属性可以接受一个或多个蒙版层，每个蒙版层都由一个或多个子属性值组合而成，顺序不限。其中，mask 子属性如下表所示。
| 子属性 | 说明 |
|---|---|
| mask-image | 指定用作蒙版的图像 |
| mask-mode | 定义蒙版图像的渲染模式 |
| mask-repeat | 定义蒙版图像的重复方式 |
| mask-position | 定义蒙版图像的起始位置 |
| mask-size | 定义蒙版图像的尺寸大小 |
| mask-origin | 定义蒙版图像的定位原点 |
| mask-clip | 定义蒙版图像的裁剪区域 |
| mask-composite | 定义多个蒙版图像之间的合成模式 |
注意:
- mask 属性适用于所有元素。
- 用作蒙版的图像会影响元素内容的可见性，而不是元素本身的背景或边框。
CSS mask 摘要
| 属于 | CSS 蒙版属性 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | 各子属性的默认值 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS mask 示例
接下来，我们通过一个简单的例子来讲解一下 CSS mask 属性是如何使用的。
示例：mask 基本用法
<!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: url("imgs/star.svg") no-repeat center / 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
mask 是一个简写属性。对于这个例子来说，下面 2 种写法是等价的。
/* 写法 1 */
mask: url("imgs/star.svg") no-repeat center / 100%;
/* 写法 2 */
mask-image: url("imgs/star.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100%;