-webkit-mask-position-x
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 |
| Valor calculado | for length the absolute value, otherwise a percentage |
| Animation type | discrete |
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
[ (en-US) <length-percentage> | (en-US) left | (en-US) center | (en-US) right ] (en-US)# (en-US)where
<length-percentage> = <length> | (en-US) <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! (en-US)
| 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 | ? |