-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 función no está estandarizada. No recomendamos usar funciones no estándar en producción, ya que tienen un soporte limitado en los navegadores y pueden cambiar o eliminarse. Sin embargo, pueden ser una alternativa adecuada en casos específicos donde no exista una opción estándar.
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
mask-repeat =
<repeat-style>#
<repeat-style> =
repeat-x |
repeat-y |
<repetition>{1,2}
<repetition> =
repeat |
space |
round |
no-repeat
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
Loading…
Ver además
-webkit-mask, -webkit-mask-box-image, -webkit-mask-clip, -webkit-mask-origin, -webkit-mask-attachment, -webkit-mask-image, -webkit-mask-composite