103 of 313 menu

Propriedade mask

A propriedade mask é uma abreviação para todas as propriedades de mascaramento e permite definir: imagem de máscara, sua posição, tamanho, modo de mesclagem e outros parâmetros.

É uma propriedade abreviada para as seguintes propriedades: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaxe

seletor {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Valores

Valor	Descrição
`none`	Desativa o mascaramento (valor padrão)
`url()`	Caminho para a imagem de máscara (SVG, PNG)
`linear-gradient()`	Gradiente linear como máscara
`radial-gradient()`	Gradiente radial como máscara
`position`	Posição da máscara (top, center, 50% 50% etc.)
`size`	Tamanho da máscara (cover, contain, 100px 50px)
`repeat`	Repetição da máscara (no-repeat, repeat-x, space)
`mode`	Modo de mesclagem (alpha, luminance, match-source)
`composite`	Composição de máscaras (add, subtract, intersect, exclude)

Preparação das imagens

Suponha que temos uma imagem da natureza que vamos recortar, e imagens SVG de um coração e uma seta, que usaremos para recortar:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

Exemplo . Imagem como máscara

Vamos aplicar a máscara de coração na nossa imagem:

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

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url("heart.svg") center/300px no-repeat;
}

:

Exemplo . Posição da máscara

Máscara de coração no canto superior esquerdo:

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

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

:

Exemplo . Posição da máscara

Máscara de coração no canto inferior direito:

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

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

:

Exemplo . Posição da máscara

Máscara de coração no centro à esquerda:

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

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

:

Exemplo . Posição da máscara

Máscara de coração no centro:

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

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

:

Exemplo . Posição da máscara

Máscara de coração a 100px da esquerda e 200px do topo:

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

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

:

Exemplo . Tamanho da máscara cover

O valor cover dimensiona a máscara para cobrir completamente o elemento, mantendo as proporções. Pode cortar as bordas da máscara se as proporções não coincidirem:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

Exemplo . Tamanho da máscara contain

O valor contain dimensiona a máscara para caber inteiramente no elemento, mantendo as proporções. Pode deixar áreas vazias:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/contain no-repeat;
}

:

Exemplo . Tamanho da máscara

O tamanho fixo define dimensões exatas para a máscara. Por exemplo, vamos fazer uma máscara com tamanho de 50px:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/50px no-repeat;
}

:

Exemplo . Repetição no-repeat

O valor no-repeat desativa a repetição da máscara. A máscara é exibida apenas uma vez na posição especificada:

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

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

:

Exemplo . Repetição repeat-x

O valor repeat-x repete a máscara apenas no eixo horizontal:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

Exemplo . Composição add

O valor add soma várias máscaras (resultado - união de todas as máscaras):

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 200px 30px / 150px no-repeat;
	mask-composite: add;
}

:

Exemplo . Composição intersect

O valor intersect mostra apenas a área de interseção das máscaras:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: intersect;
}

:

Exemplo . Composição exclude

O valor exclude mostra as áreas das máscaras que não se sobrepõem:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: exclude;
}

:

Exemplo . Composição subtract

O valor subtract subtrai a segunda máscara da primeira. Como exemplo, vamos fazer um coração e subtrair dele uma seta:

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

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

Exemplo . Notação expandida de mask

A propriedade mask, escrita com seus componentes individuais:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

Exemplo . SVG para imagem

Usando um elemento SVG como máscara para uma imagem:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url(#mask);
}

:

Exemplo . SVG para gradiente

Usando um elemento SVG como máscara para um gradiente:

<div id="elem"></div>
<svg width="0" height="0">
	<mask id="star-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

Veja também

propriedade mask-position,
define a posição da máscara em relação ao elemento
propriedade mask-image,
define a imagem para a máscara
propriedade mask-mode,
define como a máscara interage com o fundo
propriedade mask-size,
define o tamanho da máscara
propriedade mask-repeat,
define a repetição da máscara
propriedade mask-origin,
define a área de posicionamento da máscara
propriedade mask-clip,
define a área de recorte da máscara
propriedade mask-composite,
define como várias máscaras são combinadas

↑

hy cs sv uzc ka