CSS mask-image 语法
在 CSS 中，mask-image 属性用于指定用作蒙版的图像。
语法：
mask-image: none | 图片 | 渐变;说明：
mask-image 取值可以是 none，也可以是一个 CSS 函数。其中常用的 CSS 函数如下表所示。
| 取值 | 说明 |
|---|---|
| url() | 使用图片作为蒙版 |
| linear-gradient() | 使用线性渐变作为蒙版 |
| radial-gradient() | 使用径向渐变作为蒙版 |
| conic-gradient() | 使用锥形渐变作为蒙版 |
mask-image 默认使用图像的 “alpha（透明度）通道” 作为蒙版。这意味着：
- 蒙版图像中完全透明（alpha 值为 0）的部分会完全隐藏元素的内容。
- 蒙版图像中完全不透明（alpha 值为 1）的部分会完全显示元素的内容。
- 蒙版图像中半透明的部分会以相应的透明度显示元素内容。
此外，mask-image 的取值还可以是多个蒙版源，蒙版之间使用英文逗号隔开即可。这样可以一次性创建多个蒙版效果，比如：
mask-image: url("test1.png"), url("test2.png");注意:
- 为了更好的浏览器兼容性，建议在使用时添加浏览器前缀（如 -webkit-mask-image），尤其是在旧版浏览器中。
- 如果你希望使用图像的亮度信息作为蒙版（比如白色表示显示、黑色表示隐藏），则需要同时使用 mask-mode: luminance; 搭配使用。
CSS mask-image 摘要
| 属于 | CSS 蒙版属性 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS mask-image 示例
接下来，我们通过几个简单的例子来讲解一下 CSS mask-image 属性是如何使用的。
示例 1：mask-image 使用图片作为蒙版
<!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-repeat: no-repeat; /* 不重复 */
mask-position: center; /* 位置居中 */
mask-size: 100%; /* 尺寸大小 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们首先给 div 元素定义一张背景图片，此时背景图片铺满元素，效果如下图所示（即没有加蒙版前的效果）。
接着我们再使用 mask-image 定义了一张星形图片作为蒙版图片，以及使用了 mask-repeat、mask-position 等属性定义了蒙版样式，因此得到的结果如下图所示。
示例 2：mask-image 使用线性渐变作为蒙版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: #eaf4ff;
}
div {
overflow: hidden; /* 确保溢出内容被隐藏，但蒙版依然生效 */
width: 400px;
padding: 20px;
margin: 30px auto;
background-color: white;
border: 1px solid #cce5ff;
font-size: 1.2em;
line-height: 1.5;
color: #333;
/* 使用线性渐变作为蒙版 */
/* 从左侧完全不透明到右侧完全透明 */
mask-image: linear-gradient(to right, black 0%, black 80%, transparent 100%);
}
</style>
</head>
<body>
<div>
<p>CSS，全称 “Cascading Style Sheet（层叠样式表）” ，它是用来控制网页外观的一门技术。CSS 能够控制网页元素的布局、外观和行为，是创建一个用户体验友好页面的关键技术。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用 linear-gradient() 作为 mask-image 的值，然后来创建文本渐隐效果。
mask-image: linear-gradient(to right, black 0%, black 80%, transparent 100%); 上面这句代码表示定义了一个从左到右的线性渐变蒙版。在 0% 到 80% 的范围内，蒙版颜色是 black ( 完全不透明，因此内容完全显示 )。 从 80% 到 100%，蒙版颜色从 black 渐变到 transparent ( 完全透明，因此内容逐渐隐藏 )。
最终会使得文本在右侧的 20% 区域内呈现出平滑的渐隐效果，非常适合用于限制文本显示区域或创建 “阅读更多” 的视觉提示。
mask 是一个复合属性
在 CSS 中，mask 是一个复合属性，它包含很多子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| mask-image | 指定用作蒙版的图像 |
| mask-mode | 定义蒙版图像的渲染模式 |
| mask-repeat | 定义蒙版图像的重复方式 |
| mask-position | 定义蒙版图像的起始位置 |
| mask-size | 定义蒙版图像的尺寸大小 |
| mask-origin | 定义蒙版图像的定位原点 |
| mask-clip | 定义蒙版图像的裁剪区域 |
| mask-composite | 定义多个蒙版图像之间的合成模式 |
