Propriedade mix-blend-mode

A propriedade mix-blend-mode define o modo de mesclagem da cor de origem com a cor de fundo ou imagem de fundo. Os valores para a propriedade são análogos aos modos principais de editores gráficos.

Sintaxe

seletor {
	mix-blend-mode: valores;
}

A tabela apresenta os principais valores para a propriedade mix-blend-mode:

Valores

Valor	Descrição
`normal`	Normal. Não usa mistura de cores. Modo padrão.
`multiply`	Multiplicação. Neste modo, o valor da cor primária é multiplicado pelo valor da cor combinada. A cor resultante sempre representa uma cor mais escura.
`screen`	Clareamento. Neste modo, os valores inversos das cores primária e combinada são multiplicados. Como cor resultante, sempre é aplicada uma cor mais clara.
`overlay`	Sobreposição. Neste modo, as cores são multiplicadas ou clareadas dependendo da cor primária. Padrões ou cores sobrepõem os pixels existentes, deixando inalteradas as áreas claras e escuras da cor primária.

Exemplo

Vamos ver como uma imagem com o valor padrão da propriedade mix-blend-mode será exibida:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Exemplo

E agora vamos mudar o modo de mesclagem para multiplicação:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Exemplo

Vamos definir o valor de sobreposição para a propriedade mix-blend-mode:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

Veja também

a propriedade background,
que é uma propriedade abreviada para o fundo
a propriedade background-image,
com a qual se pode definir uma imagem de fundo para um bloco
a propriedade background-blend-mode,
com a qual se pode sobrepor uma imagem de fundo a uma cor de fundo