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 -webkit-mask es una manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: -webkit-mask-image, -webkit-mask-repeat, -webkit-mask-attachment, -webkit-mask-position, -webkit-mask-origin, y -webkit-mask-clip.
| Valor inicial | as each of the properties of the shorthand:
|
|---|---|
| Applies to | all elements |
| Heredable | no |
| Media | visual |
| Valor calculado | as each of the properties of the shorthand:
|
| Animatable | no |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
Síntaxis
/* Palabras clave valor */ -webkit-mask: none; /* Valores de imágene */ -webkit-mask: url(mask.png); /* Imagen de pixel usado coo máscara */ -webkit-mask: url(masks.svg#star); /* Elemento dentro de un gráfico SVG usado como máscara */ -webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */ /* Valores combinados */ -webkit-mask: url(masks.svg#star) 40px 20px; /* Elemento dentro de un gráfico SVG usado como máscara y posicionado 40px desde la parte superior y 20px a la izquierda */ -webkit-mask: url(masks.svg#star) 0 0/50px 50px; /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */ -webkit-mask: url(masks.svg#star) repeat-x; /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */ -webkit-mask: url(masks.svg#star) border; /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */ -webkit-mask: url(masks.svg#star) text; /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */ /* Valores globales */ -webkit-mask: inherit; -webkit-mask: initial; -webkit-mask: unset;
Valores
- mask-image
- Requierido.Ver
-webkit-mask-image. - mask-repeat
- Opcional. Ver
-webkit-mask-repeat. - mask-attachment
- Opcional Ver
-webkit-mask-attachment. - mask-position
- Opcional. Ver
-webkit-mask-position. - mask-origin
- Opcional. Ver
-webkit-mask-origin. - mask-clip
- Opcional Ver
-webkit-mask-clip.
Síntaxis Formal
<mask-image> [<mask-repeat> || <mask-attachment> || <mask-position> || <mask-origin> || <mask-clip>]*where
<mask-position> = [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]?
Ejemplos
.example {
-webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
}
Compatibilidad con los distintos navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Soporte básico | 1.0 | No support | No support | No support | 4.0 |
| Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Soporte básico | 2.1 | No support | No support | No support | 3.2 |