-webkit-mask-position-x
非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都起作用。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。
-webkit-mask-position-x CSS 属性设置遮罩图像的初始水平位置。
语法
css
/* Keyword values */
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;
/* <percentage> values */
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;
/* <length> values */
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;
/* Multiple values */
-webkit-mask-position-x:
50px,
25%,
-3em;
/* Global values */
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: revert;
-webkit-mask-position-x: revert-layer;
-webkit-mask-position-x: unset;
值
<length-percentage>-
表示图像左边缘相对于盒子左填充边缘的位置的长度。百分比根据盒子的水平填充区域的尺寸计算。这意味着，值
0%表示图像的左边缘与盒子的左填充边缘对齐，值100%表示图像的右边缘与盒子的右填充边缘对齐。 left-
等效于
0%。 center-
等效于
50%。 right-
等效于
100%。
正式定义
正式语法
-webkit-mask-position-x = [ <length-percentage> | left | center | right ]#
示例
水平定位遮罩图像
css
.exampleOne {
-webkit-mask-image: url(mask.png);
-webkit-mask-position-x: right;
}
.exampleTwo {
-webkit-mask-image: url(mask.png);
-webkit-mask-position-x: 25%;
}
规范
不属于任何标准。
浏览器兼容性
BCD 表格仅在浏览器中加载