Propiedad mask-position

La propiedad mask-position establece la posición inicial de la máscara en relación con el elemento. Funciona de manera similar a background-position, pero se aplica a las máscaras.

Sintaxis

cssselector {
  mask-position: <position>;
}

Valores

Valor	Descripción
`top left`	En la esquina superior izquierda (por defecto).
`center`	Centrado en el elemento.
`50% 50%`	Equivalente a center.
`right bottom`	En la esquina inferior derecha.
`100px 200px`	Coordenadas específicas en píxeles.

Ejemplo . Centrado de máscara

Máscara de corazón centrada en la imagen:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Ejemplo . Esquina superior izquierda

Máscara en la esquina superior izquierda:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: left top;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Ejemplo . Esquina inferior derecha

Máscara en la esquina inferior derecha:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: right bottom;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Ejemplo . Coordenadas exactas

La máscara se posiciona mediante coordenadas exactas:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: 100px 200px;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Ejemplo . Posicionamiento porcentual

Posicionamiento de la máscara usando porcentajes:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: 30% 70%;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Véase también

propiedad mask-size,
define el tamaño de la máscara
propiedad mask-origin,
define el punto de referencia para el posicionamiento
propiedad mask,
abreviatura para todas las propiedades de enmascaramiento