Propriedade mask-origin

A propriedade mask-origin define o ponto de referência para o posicionamento da máscara. Ela determina em relação a qual parte do elemento (bordas, preenchimento ou conteúdo) a máscara será posicionada.

Sintaxe

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

Valores

Valor	Descrição
`border-box`	A máscara é posicionada em relação à borda do elemento (incluindo border).
`padding-box`	A máscara é posicionada em relação à área de preenchimento (padding) (padrão).
`content-box`	A máscara é posicionada em relação ao conteúdo do elemento.

Exemplo . border-box

A máscara é posicionada em relação à borda do 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;
}

Exemplo . padding-box

A máscara é posicionada em relação à área de preenchimento:

<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;
}

Exemplo . content-box

A máscara é posicionada em relação ao conteúdo:

<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;
}

Veja também

propriedade mask-clip,
define a área de recorte da máscara
propriedade mask-position,
define a posição da máscara
propriedade mask,
atalho para todas as propriedades de mascaramento
propriedade background-origin,
propriedade semelhante para o fundo do elemento