-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