Propriedade mask-position
A propriedade mask-position define a posição inicial da máscara em relação ao elemento.
Funciona de forma semelhante a background-position, mas aplica-se a máscaras.
Sintaxe
seletor {
mask-position: <position>;
}
Valores
| Valor | Descrição |
|---|---|
top left |
No canto superior esquerdo (padrão). |
center |
Centralizado no elemento. |
50% 50% |
Equivalente a center. |
right bottom |
No canto inferior direito. |
100px 200px |
Coordenadas específicas em pixels. |
Exemplo . Centralizando a máscara
Máscara de coração centralizada na imagem:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Exemplo . Canto superior esquerdo
Máscara no canto superior esquerdo:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Exemplo . Canto inferior direito
Máscara no canto inferior direito:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Exemplo . Coordenadas precisas
Máscara posicionada por coordenadas precisas:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Exemplo . Posicionamento percentual
Posicionamento da máscara usando porcentagens:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Veja também
-
propriedade
mask-size,
define o tamanho da máscara -
propriedade
mask-origin,
define o ponto de referência para o posicionamento -
propriedade
mask,
atalho para todas as propriedades de mascaramento
