-webkit-mask-position-y

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

-webkit-mask-position-y CSS property sets the initial vertical position of a mask image.

/* 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 values */
-webkit-mask-position-y: 50px, 25%, -3em;
/* Global values */
-webkit-mask-position-y: inherit;
-webkit-mask-position-y: initial;
-webkit-mask-position-y: unset;

初始值	`0%`
适用于	所有元素
继承	no
百分比	refer to the size of the box itself
计算值	for `<length>` the absolute value, otherwise a percentage
动画类型	discrete

句法

值

<length-percentage>: A length indicating the position of the top side of the image relative to the box's top padding edge. Percentages are calculated against the vertical dimension of the box padding area. A value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of 100% means the bottom edge of the image is aligned with the box's bottom padding edge.
top: 相当于 0% .
bottom: 相当于 100% .
center: 相当于 50% .

形式定义

初始值	`0%`
适用于	所有元素
继承	no
百分比	refer to the size of the box itself
计算值	for `<length>` the absolute value, otherwise a percentage
动画类型	discrete

形式句法

[ <length-percentage> | top | center | bottom ]#where 
<length-percentage> = <length> | <percentage>

范例

Vertically positioning a mask image

.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: bottom;
}
.exampleTwo {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-y: 25%;
}

规范

Not part of any standard.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`-webkit-mask-position-y` 非标	Chrome 完整支持 1	Edge 完整支持 18	Firefox 完整支持 49	IE 不支持 No	Opera 完整支持 15	Safari 完整支持 3.2	WebView Android 完整支持 2	Chrome Android 完整支持 18	Firefox Android 完整支持 49	Opera Android 完整支持 14	Safari iOS 完整支持 3.2	Samsung Internet Android 完整支持 1.0

图例

完整支持
不支持
非标。预期跨浏览器支持较差。

另请参阅

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

元数据

最后修改： Jul 28, 2020

在此页

句法

值

形式定义

形式句法

范例

Vertically positioning a mask image

规范

浏览器兼容性

图例

另请参阅

相关话题