CSS mask-position 语法
在 CSS 中，mask-position 属性用于定义蒙版图像的起始位置。它的工作方式与 background-position 属性完全相同。
语法：
mask-position: 数值或关键字;说明：
background-position 属性的取值有 2 种。
- 数值，比如像素值（px）、百分比（%）、em、rem 等。
- 关键字，如下表所示和下图所示。
| 取值 | 说明 |
|---|---|
| top left（默认值） | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| center left | 居中靠左 |
| center center（或简写为 center） | 正中 |
| center right | 居中靠右 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
需要清楚的是，当取值为关键字时，mask-position 是使用 “水平关键字” 和 “垂直关键字” 进行组合的。
- 水平关键字：left、center、right。
- 垂直关键字：top、center、bottom。
其中下面 2 种写法是等价的（非常重要），mask-position 不区分前后顺序，只关注是使用了哪个水平关键字，或哪个垂直关键字。
/* 写法 1 */
background-position: top left;
/* 写法 2 */
background-position: left top;当 mask-image 属性中定义了多个蒙版图像时，mask-position 属性也要提供对应数量的位置值，并用逗号分隔，这些值会按顺序应用于各个蒙版层，比如：
mask-image: url("test1.png"), url("test2.png");
mask-position: center, 10px 20px;对于 mask-position 属性，小伙伴们还要清楚以下几点。
- mask-position 属性适用于所有元素。
- 如果 mask-repeat 设置为 repeat、repeat-x、repeat-y、space 或 round，则 mask-position 只会影响第一个重复实例的起始位置。
注意: 为了更好的浏览器兼容性，建议在使用时添加浏览器前缀（如 -webkit-mask-position），尤其是在旧版浏览器中。
CSS mask-position 摘要
| 属于 | CSS 蒙版属性 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | top left（0% 0%） |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS mask-position 示例
接下来，我们通过几个简单的例子来讲解一下 CSS mask-position 属性是如何使用的。
示例 1：mask-position 取值是 “数值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: inline-block;
margin: 20px;
border: 1px dashed gray;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
/* 定义背景图片 */
background-image: url("imgs/bird.jpg");
background-size: cover;
/* 定义蒙版图片 */
mask-image: url("imgs/star.svg");
mask-repeat: no-repeat; /* 图片不重复 */
mask-size: 50px 50px; /* 图片大小：50px × 50px */
mask-position: 30px 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
mask-position: 30px 30px; 表示定义蒙版图片的位置为 “距离顶边为30px、距离左边也是30px”。
示例 2：mask-position 取值是 “关键字”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: inline-block;
margin: 20px;
border: 1px dashed gray;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
/* 定义背景图片 */
background-image: url("imgs/bird.jpg");
background-size: cover;
/* 定义蒙版图片 */
mask-image: url("imgs/star.svg");
mask-repeat: no-repeat; /* 图片不重复 */
mask-size: 50px 50px; /* 图片大小：50px × 50px */
mask-position: center right;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
mask-position: center right; 表示定义蒙版图片的位置为 “居中靠右”。如果改为 mask-position: bottom left;，此时页面效果如下图所示。
小伙伴们可以改变 mask-position 的取值，然后看看效果又是怎样的。
mask 是一个复合属性
在 CSS 中，mask 是一个复合属性，它包含很多子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| mask-image | 指定用作蒙版的图像 |
| mask-mode | 定义蒙版图像的渲染模式 |
| mask-repeat | 定义蒙版图像的重复方式 |
| mask-position | 定义蒙版图像的起始位置 |
| mask-size | 定义蒙版图像的尺寸大小 |
| mask-origin | 定义蒙版图像的定位原点 |
| mask-clip | 定义蒙版图像的裁剪区域 |
| mask-composite | 定义多个蒙版图像之间的合成模式 |
