-webkit-mask-position-y
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-y đặt vị trí dọc ban đầu của một hình ảnh mặt nạ.
Cú pháp
/* Giá trị từ khóa */
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;
/* Giá trị <percentage> */
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;
/* Giá trị <length> */
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;
/* Nhiều giá trị */
-webkit-mask-position-y:
50px,
25%,
-3em;
/* Giá trị toàn cục */
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: revert;
-webkit-mask-position-y: revert-layer;
-webkit-mask-position-y: unset;
Giá trị
<length-percentage>-
Một độ dài chỉ định vị trí cạnh trên của hình ảnh so với cạnh trên vùng đệm của hộp. Tỷ lệ phần trăm được tính theo chiều dọc của vùng đệm hộp. Giá trị
0%có nghĩa là cạnh trên của hình ảnh căn chỉnh với cạnh trên vùng đệm của hộp, và giá trị100%có nghĩa là cạnh dưới của hình ảnh căn chỉnh với cạnh dưới vùng đệm của hộp. top-
Tương đương với
0%. bottom-
Tương đương với
100%. center-
Tương đương với
50%.
Đị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-y =
[ <length-percentage> | top | center | bottom ]#
<length-percentage> =
<length> |
<percentage>
Ví dụ
Định vị dọc hình ảnh mặt nạ
.exampleOne {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-y: bottom;
}
.exampleTwo {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-y: 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-x, -webkit-mask-origin