Atributo mask-repeat de CSS

Página anterior mask-position
Página siguiente mask-size

Definición y uso

mask-repeat La propiedad establece si/ cómo se repite la imagen de máscara.

Por defecto, la imagen de máscara se repetirá en ambas direcciones, vertical y horizontal.

Ejemplo

Ejemplo 1

usar mask-repeat: no-repeat; y mask-repeat: repeat;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: repeat;
}

Intente usted mismo

Ejemplo 2

usar mask-repeat: round; y mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

Intente usted mismo

Ejemplo 3

usar mask-repeat: repeat-x; y mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

Intente usted mismo

Sintaxis CSS

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

Valor del atributo

Valor	Descripción
repeat	La imagen de máscara se repetirá en ambas direcciones, vertical y horizontal. Si la última imagen no es adecuada, se cortará. Este es el valor predeterminado.
repeat-x	La imagen de máscara se repetirá solo en la dirección horizontal.
repeat-y	La imagen de máscara se repetirá solo en la dirección vertical.
space	La imagen de máscara se repetirá tantas veces como sea posible sin cortar. La primera y última imagen se fijan respectivamente en los lados del elemento, y el espacio en blanco entre las imágenes se distribuye uniformemente.
round	La imagen de máscara se repetirá y se comprimirá o estirará para llenar el espacio (sin espacio entre ellas).
no-repeat	La imagen de máscara no se repite. La imagen solo se mostrará una vez.
initial	Establezca este atributo en su valor predeterminado. Consulte initial.
inherit	Hereda este atributo del elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado:	repeat
Herencia:	No
Producción de animación:	No se admite. Consulte:Atributos relacionados con la animación.
Versión:	Módulo de Masking CSS Nivel 1
Sintaxis de JavaScript:	object.style.maskRepeat="no-repeat"