-webkit-mask-repeat

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 inicialrepeat
Applies toall elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animatableno
Canonical orderorder 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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: pekechis
 Última actualización por: pekechis,