-webkit-mask-position-y

No estándar: Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen

La propiedad CSS -webkit-mask-position-y fija la posición inicial vertical de una imagen de máscara.

Valor inicial0%
Applies toall elements
Heredableno
Percentagesrefer to the size of the box itself
Valor calculadofor <length> the absolute value, otherwise a percentage
Animation typediscrete

Síntaxis

css
/* 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

Error: could not find syntax for this item

Ejemplos

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

Especificaciones

No forma parte de ninguna especificación.

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-webkit-mask-position-y
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.

Ver además