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-repeat especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.
| Valor inicial | repeat |
|---|---|
| Applies to | all elements |
| Heredable | no |
| Media | visual |
| Valor calculado | como se especifica |
| Animatable | no |
| Canonical order | order of appearance in the formal grammar of the values |
Síntaxis
/* Palabras clave de valor únicas */ -webkit-mask-repeat: repeat; -webkit-mask-repeat: repeat-x; -webkit-mask-repeat: repeat-y; -webkit-mask-repeat: no-repeat; /* Palabras clave de valor mútiple */ -webkit-mask-repeat: repeat, repeat-x, no-repeat; /* Valores globlaes */ -webkit-mask-repeat: inherit; -webkit-mask-repeat: initial; -webkit-mask-repeat: unset;
Valores
- repeat
- La máscara de imagen se repite tanto vertical como horizontalmente.
- repeat-x
- La imagen de máscara de repite sólo horizontalmente.
- repeat-y
- La imagen de máscara de repite sólo verticalemente.
- no-repeat
- La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.
Síntaxis Formal
<repeat-style>[, <repeat-style>]*where
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
Ejemplos
.exampleone {
-webkit-mask-image: url('mask.png');
-webkit-mask-repeat: repeat-x;
}
.exampletwo {
-webkit-mask-image: url('mask.png');
-webkit-mask-repeat: no-repeat;
}
Soporte para múltiples imágenes de máscara
Se puede especificar, seperados por comas, un <repeat-style> para cada una de las imágenes de máscara:
.examplethree {
-webkit-mask-image: url('mask1.png'), url('mask2.png');
-webkit-mask-repeat: repeat-x, repeat-y;
}
Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.
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 | ? | ? | ? | 3.2 |
Ver además
-webkit-mask, -webkit-mask-box-image, -webkit-mask-clip, -webkit-mask-origin, -webkit-mask-attachment, -webkit-mask-image, -webkit-mask-composite