-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%

正式定義

初始值0%
應用於所有元素
繼承性
百分比參照盒模型自身的尺寸
計算值對於 <length> 則是絕對值,否則為百分比
動畫型別離散

正式語法

-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