-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