-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 inicialrepeat
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Heredableno
Valor calculadoConsists of two keywords, one per dimension
Animation typediscrete

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-repeat

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Ver además