-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
/* 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
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 navegadores
BCD tables only load in the browser