Propiedad mask-origin

La propiedad mask-origin establece el punto de referencia para posicionar la máscara. Define en relación a qué parte del elemento (bordes, márgenes o contenido) se colocará la máscara.

Sintaxis

selector {
	mask-origin: content-box | padding-box | border-box;
}

Valores

Valor	Descripción
`border-box`	La máscara se posiciona en relación con el borde del elemento (incluyendo border).
`padding-box`	La máscara se posiciona en relación con el área de padding (por defecto).
`content-box`	La máscara se posiciona en relación con el contenido del elemento.

Ejemplo . border-box

La máscara se posiciona en relación con el borde del elemento:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: border-box;
}

Ejemplo . padding-box

La máscara se posiciona en relación con el área de márgenes:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: padding-box;
}

Ejemplo . content-box

La máscara se posiciona en relación con el contenido:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: content-box;
}

Véase también

propiedad mask-clip,
define el área de recorte de la máscara
propiedad mask-position,
establece la posición de la máscara
propiedad mask,
abreviatura para todas las propiedades de enmascaramiento
propiedad background-origin,
propiedad similar para el fondo del elemento