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