No estándar
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Resumen
La propiedad CSS -webkit-mask-position-y fija la posición inicial vertical de una imagen de máscara.
| Valor inicial | 0% |
|---|---|
| Applies to | all elements |
| Heredable | no |
| Percentages | refer to the size of the box itself |
| Media | visual |
| Valor calculado | for length the absolute value, otherwise a percentage |
| Animatable | no |
| Canonical order | order of appearance in the formal grammar of the values |
Síntaxis
/* Palabras clave valores */ -webkit-mask-position-y: top; -webkit-mask-position-y: center; -webkit-mask-position-y: bottom; /* valores <porcentaje> */ -webkit-mask-position-y: 100%; -webkit-mask-position-y: -50%; /* valores <longitud> */ -webkit-mask-position-y: 50px; -webkit-mask-position-y: -1cm; /* Valores Múltiples*/ -webkit-mask-position-y: 50px, 25%, -3em; /* Valores globales */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset;
Values
<percentage>- Un porcentaje que sirve para indicar, empezando por el lado superior, la posición de la imagen en relación a la dimensión vertical del área de la caja de relleno (padding). Un valor del 0% indica que el lado superior de la imagen de máscara se alinea con el lado superior de la caja. Un valor del 100% indica que que el lado inferior de la imagen se alinea con el lado inferior de la caja.
<length>- Una longitud indicando la posición del lado superior de la imagen en relación con el lado superior de la cajade relleno (padding).
top- Equivalente a
0%. bottom- Equivalente a
100%. center- Equivalente a
50%.
Síntaxis Formal
[ <percentage> | <length> | top | center | bottom ]#
Ejemplos
.exampleOne {
-webkit-mask-image: url(mask.png);
-webkit-mask-position-y: bottom;
}
.exampleTwo {
-webkit-mask-image: url(mask.png);
-webkit-mask-position-y: 25%;
}
Especificaciones
Not part of any specification.
Compatibilidad con los distintos navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Soporte básico | 1.0 | No support | No support | No support | 4.0 |
| Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Soporte básico | ? | No support | No support | No support | ? |
Ver además
-webkit-mask-position, -webkit-mask-position-x, -webkit-mask-origin, -webkit-mask-attachment