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
[ <box> | border | padding | content ]#
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 |
Ver además
-webkit-mask, -webkit-mask-box-image, -webkit-mask-attachment, -webkit-mask-image,-webkit-mask-composite, -webkit-mask-repeat, -webkit-mask-clip