-webkit-mask-position-x
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
-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 ]#
<length-percentage> =
<length> |
<percentage>
示例
水平定位遮罩图像
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%;
}
规范
不属于任何标准。
浏览器兼容性
加载中…
另见
-webkit-mask-position, -webkit-mask-position-y, -webkit-mask-origin