-webkit-mask-position-x
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Thuộc tính CSS -webkit-mask-position-x thiết lập vị trí ngang ban đầu của hình ảnh mặt nạ.
Cú pháp
/* Giá trị từ khóa */
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;
/* Giá trị <percentage> */
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;
/* Giá trị <length> */
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;
/* Nhiều giá trị */
-webkit-mask-position-x:
50px,
25%,
-3em;
/* Giá trị toàn cục */
-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;
Giá trị
<length-percentage>-
Độ dài chỉ định vị trí cạnh trái của hình ảnh so với cạnh padding trái của hộp. Phần trăm được tính dựa trên kích thước ngang của khu vực padding hộp. Nghĩa là, giá trị
0%có nghĩa là cạnh trái của hình ảnh căn với cạnh padding trái của hộp và giá trị100%có nghĩa là cạnh phải của hình ảnh căn với cạnh padding phải của hộp. left-
Tương đương với
0%. center-
Tương đương với
50%. right-
Tương đương với
100%.
Định nghĩa hình thức
| Initial value | 0% |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Percentages | refer to the size of the box itself |
| Computed value | for <length> the absolute value, otherwise a percentage |
| Animation type | discrete |
Cú pháp hình thức
-webkit-mask-position-x =
[ <length-percentage> | left | center | right ]#
<length-percentage> =
<length> |
<percentage>
Ví dụ
Định vị ngang hình ảnh mặt nạ
.exampleOne {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-x: right;
}
.exampleTwo {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-x: 25%;
}
Đặc tả
Không thuộc bất kỳ tiêu chuẩn nào.
Tương thích trình duyệt
Xem thêm
-webkit-mask-position, -webkit-mask-position-y, -webkit-mask-origin