CSS propriedade mask-position

Página anterior mask-origin
Próxima página mask-repeat

Definição e uso

mask-position A propriedade define a posição inicial da imagem de máscara (relativa à área de posição da máscara).

Dica:Por padrão, a imagem de máscara é colocada no canto superior esquerdo do elemento e repetida nas direções vertical e horizontal.

Exemplo

Exemplo 1

Defina a posição da imagem de máscara para o centro:

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

Experimente você mesmo

Exemplo 2

Defina a posição da imagem de máscara para o canto inferior direito:

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

Experimente você mesmo

Sintaxe CSS

mask-position: value;

Valor da propriedade

Valor	Descrição
left top left center left bottom right top right center right bottom center top center center center bottom	Se apenas um nome de chave for especificado, o outro valor será "center".
x% y%	O primeiro valor é a posição horizontal, o segundo é a posição vertical. O canto superior esquerdo é 0% 0%. O canto inferior direito é 100% 100%. Se apenas um valor for especificado, o outro será 50%. O valor padrão é: 0% 0%
xpos ypos	O primeiro valor é a posição horizontal, o segundo é a posição vertical. O canto superior esquerdo é 0 0. A unidade pode ser pixel (0px 0px) ou qualquer outra unidade CSS. Se apenas um valor for especificado, o outro será 50%. Pode ser usado % e posição em mistura.
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:	0% 0%
Herança:	Não
Produção de animação:	Não suportado. Veja:Propriedades relacionadas a animação.
Versão:	Módulo de Mascaramento CSS Nível 1
Sintaxe do JavaScript:	object.style.maskPosition="100px center"