-webkit-mask-position-y

**非标准：**此功能是非标准的，不在标准轨道上。请勿在面向 Web 的生产网站上使用它：它不会对所有用户起作用。不同实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

-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% 表示图像的底部边缘与盒子的底部填充边缘对齐。
顶部: 等效于 0%。
bottom: 等效于 100%。
center: 等效于 50%。

正式定义

初始值	`0%`
应用于	所有元素
继承	否
百分比	指的是盒子本身的大小
计算值	对于 `<length>` 绝对值，否则为百分比
动画类型	离散

正式语法

-webkit-mask-position-y =
  [ <length-percentage> | top | center | bottom ]#

示例

垂直定位遮罩图像

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

规范

不是任何标准的一部分。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

-webkit-mask-position, -webkit-mask-position-x, -webkit-mask-origin