-webkit-mask-position-x

No estándar: Esta función no está estandarizada. No recomendamos usar funciones no estándar en producción, ya que tienen un soporte limitado en los navegadores y pueden cambiar o eliminarse. Sin embargo, pueden ser una alternativa adecuada en casos específicos donde no exista una opción estándar.

Resumen

La propiedad CSS -webkit-mask-position-x CSS establece la posición horizontal inicial de una imagen de máscara.

Valor inicial	`0%`
Applies to	all elements
Heredable	no
Percentages	refer to the size of the box itself
Valor calculado	for `<length>` the absolute value, otherwise a percentage
Animation type	discrete

Síntaxis

css

/* Palabras Clave valores */
-webkit-mask-position-x: left;
-webkit-mask-position-x: center;
-webkit-mask-position-x: right;

/* <porcentaje> valores */
-webkit-mask-position-x: 100%;
-webkit-mask-position-x: -50%;

/* <longitud> valores */
-webkit-mask-position-x: 50px;
-webkit-mask-position-x: -1cm;

/* Múltiples valores */
-webkit-mask-position-x:
  50px,
  25%,
  -3em;

/* Valores globales */
-webkit-mask-position-x: inherit;
-webkit-mask-position-x: initial;
-webkit-mask-position-x: unset;

Valores

<percentage>: Un porcentaje que sirve para indicar, empezando por el lado izquierdo, la posición de la imagen en relación a la dimensión horizontal del área de la caja de relleno (padding). Un valor del 0% indica que el lado izquierdo de la imagen de máscara se alinea con el lado izquierdo de la caja. Un valor del 100% indica que que el lado derecho de la imagen se alinea con el lado derecho de la caja.
<length>: Una longitud indicando la posición del lado izquierdo de la imagen en relación con el lado izquierdo de la caja.
left: Equivalente a 0%.
center: Equivalente a 50%.
right: Equivalente a 100%.

Síntaxis Formal

Error: could not find syntax for this item

Ejemplos

css

.exampleOne {
  -webkit-mask-image: url(mask.png);
  -webkit-mask-position-x: right;
}

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

Especificaciones

No forma parte de ninguna especificación.

Compatibilidad con navegadores

Help improve MDN

Learn how to contribute

This page was last modified on ⁨22 jul 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content