-webkit-mask-position-y
非標準:此特性未標準化。我們不建議在生產環境中使用非標準特性,因為它們瀏覽器支援有限,並且可能會更改或被移除。但是,在沒有標準選項的特定情況下,它們可以是合適的替代方案。
-webkit-mask-position-y CSS 屬性設定遮罩影像的初始垂直位置。
語法
css
/* Keyword values */
-webkit-mask-position-y: top;
-webkit-mask-position-y: center;
-webkit-mask-position-y: bottom;
/* <percentage> values */
-webkit-mask-position-y: 100%;
-webkit-mask-position-y: -50%;
/* <length> values */
-webkit-mask-position-y: 50px;
-webkit-mask-position-y: -1cm;
/* Multiple values */
-webkit-mask-position-y:
50px,
25%,
-3em;
/* Global values */
-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;
值
<length-percentage>-
一個長度值,表示影像頂部相對於盒模型的頂部內邊距邊緣的位置。百分比是根據盒模型內邊距區域的垂直尺寸計算的。
0%表示影像的頂部邊緣與盒模型的頂部內邊距邊緣對齊,而100%表示影像的底部邊緣與盒模型的底部內邊距邊緣對齊。 top-
相當於
0%。 bottom-
相當於
100%。 center-
相當於
50%。
正式定義
正式語法
-webkit-mask-position-y =
[ <length-percentage> | top | center | bottom ]#
<length-percentage> =
<length> |
<percentage>
示例
垂直定位遮罩影像
css
.exampleOne {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-y: bottom;
}
.exampleTwo {
-webkit-mask-image: url("mask.png");
-webkit-mask-position-y: 25%;
}
規範
不屬於任何標準。
瀏覽器相容性
載入中…
另見
-webkit-mask-position, -webkit-mask-position-x, -webkit-mask-origin