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.
La propiedad CSS -webkit-mask-origin
determina el origen de una imagen de máscara. El valor de la propiedad -webkit-mask-position
se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment
es fixed
.
Valor inicial | padding |
---|---|
Applies to | all elements |
Heredable | no |
Media | visual |
Valor calculado | como se especifica |
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Síntaxis
Valores
- padding
- Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas "
0 0
" es la esquina superior izquierda del límite del padding, "100% 100%
" es la esquina inferior derecha.) - border
- La posición de la imagen de máscara es relativa al borde.
- content
- La posición de la imagen de máscara es relativa al contenido.
Ejemplos
.example {
border: 10px double;
padding: 10px;
-webkit-mask-image: url('mask.png');
/* La imagen de máscara estará dentro del padding */
-webkit-mask-origin: content;
}
div {
-webkit-mask-image: url('mask1.png'), url('mask2.png');
-webkit-mask-origin: padding, content;
}
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ásica | 2.1 | ? | ? | ? | 3.2 |