CSS 掩码位置属性

CSS 掩码位置属性是用于指定掩码元素相对于目标元素的位置的属性。掩码元素通过掩盖（masking）来显示目标元素的一部分或全部。CSS 掩码位置属性包括 mask-position-x、mask-position-y 和 mask-position。

mask-position-x 属性

mask-position-x 属性用于指定掩码元素相对于目标元素在水平方向上的位置。该属性可以接受以下值：

• left: 掩码元素左对齐到目标元素左边缘
• center: 掩码元素水平居中对齐到目标元素
• right: 掩码元素右对齐到目标元素右边缘
• <length>: 掩码元素与目标元素在水平方向距离为指定长度。长度值可以是正数、负数或百分数。

示例代码：

.mask {
  mask-image: url('mask.png');
  mask-position-x: center;
}

mask-position-y 属性

mask-position-y 属性用于指定掩码元素相对于目标元素在垂直方向上的位置。该属性可以接受以下值：

• top: 掩码元素顶部对齐到目标元素顶部
• center: 掩码元素垂直居中对齐到目标元素
• bottom: 掩码元素底部对齐到目标元素底部
• <length>: 掩码元素与目标元素在垂直方向距离为指定长度。长度值可以是正数、负数或百分数。

示例代码：

.mask {
  mask-image: url('mask.png');
  mask-position-y: bottom;
}

mask-position 属性

mask-position 属性用于同时指定掩码元素在水平和垂直方向上相对于目标元素的位置。该属性可以接受以下值：

• <position> [<position>]?: 指定水平和垂直方向上的位置。如果只指定一个值，另一个值默认为 center。<position> 值可以是 left、center、right、top、center 或 bottom 和一个长度值。

示例代码：

.mask {
  mask-image: url('mask.png');
  mask-position: center bottom;
}