CSS propriedade mask-repeat

Página anterior mask-position
Próxima página mask-size

Definição e uso

mask-repeat A propriedade define se a imagem de máscara se repete e como.

Padrão, a imagem de máscara se repete na direção vertical e horizontal.

Exemplo

Exemplo 1

usar mask-repeat: no-repeat; e 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;
}

Experimente você mesmo

Exemplo 2

usar mask-repeat: round; e 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;
}

Experimente você mesmo

Exemplo 3

usar mask-repeat: repeat-x; e 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;
}

Experimente você mesmo

Sintaxe do CSS

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

Valor do atributo

Valor	Descrição
repeat	A imagem de máscara se repete na direção vertical e horizontal. Se a última imagem não for adequada, ela será cortada. Este é o valor padrão.
repeat-x	A imagem de máscara se repete apenas na direção horizontal.
repeat-y	A imagem de máscara se repete apenas na direção vertical.
space	A imagem de máscara se repete o máximo possível sem cortar. A primeira e a última imagens são fixadas nos lados do elemento, e o espaço em branco entre as imagens é distribuído uniformemente.
round	A imagem de máscara se repete e é comprimida ou esticada para preencher o espaço (sem间隙).
no-repeat	A imagem de máscara não se repete. A imagem será exibida apenas uma vez.
initial	Defina essa propriedade como seu valor padrão. Veja initial.
inherit	Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão:	repeat
Herança:	Não
Produção de animação:	Não suportado. Veja:Propriedades relacionadas a animação.
Versão:	Módulo de Masking do CSS Nível 1
Sintaxe do JavaScript:	object.style.maskRepeat="no-repeat"