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-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 |
| Media | visual |
| Valor calculado | for length the absolute value, otherwise a percentage |
| Animation type | discrete |
| Canonical order | order of appearance in the formal grammar of the values |
Síntaxis
/* 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
[ <length-percentage> | left | center | right ]#where
<length-percentage> = <length> | <percentage>
Ejemplos
.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 los distintos navegadores
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Soporte básico | 1.0 | Sin soporte | Sin soporte | Sin soporte | 4.0 |
| Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Soporte básico | ? | Sin soporte | Sin soporte | Sin soporte | ? |
See also
-webkit-mask-position, -webkit-mask-position-y, -webkit-mask-origin, -webkit-mask-attachment