Propriedade de posição da máscara CSS
Exemplo
Defina a posição da imagem da camada de máscara para o centro:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A mask-position
propriedade define a posição inicial de uma imagem de máscara (em relação à área de posição da máscara).
Dica: Por padrão, uma imagem de máscara é colocada no canto superior esquerdo de um elemento e repetida vertical e horizontalmente.
Valor padrão: | 0% 0% |
---|---|
Herdado: | não |
Animavel: | não. Leia sobre animáveis |
Versão: | CSS3 |
Sintaxe JavaScript: | objeto .style.maskPosition="100px centro" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -webkit- especificam a primeira versão que funcionou com um prefixo.
Property | |||||
---|---|---|---|---|---|
mask-position | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Sintaxe CSS
mask-position: value;
Valores de propriedade
Value | Description |
---|---|
left top left center left bottom right top right center right bottom center top center center center bottom |
If you only specify one keyword, the other value will be "center" |
x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% |
xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Defina a posição da imagem da camada de máscara no canto inferior direito:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 100% 100%;
mask-position: 100% 100%;
}
Páginas relacionadas
Referência CSS: propriedade mask-image
Referência CSS: propriedade do modo de máscara
Referência CSS: propriedade mask-origin
Referência CSS: propriedade mask-repeat
Referência CSS: propriedade mask-size
Tutorial de CSS: Mascaramento de CSS