-webkit-mask-repeat

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

No estándar: Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

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; In SVG, it applies to container elements excluding the `defs` element and all graphics elements
Heredable	no
Valor calculado	Consists of two keywords, one per dimension
Animation type	discrete

Síntaxis

css

/* 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

mask-repeat = 
  <repeat-style>#  

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

Ejemplos

css

.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:

css

.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 navegadores

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además

-webkit-mask, -webkit-mask-box-image, -webkit-mask-clip, -webkit-mask-origin, -webkit-mask-attachment, -webkit-mask-image, -webkit-mask-composite