Modo de mistura de fundo - CSS-Tricks

A background-blend-modepropriedade define como um elemento background-imagedeve se mesclar com background-color:

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Veja o Pen background-blend-mode da CSS-Tricks (@ css-tricks) no CodePen.

Na demonstração acima, o padrão background-imageà esquerda não tem o modo de mesclagem definido e, portanto, a imagem se sobrepõe ao background-color. À direita, entretanto, o modo de mesclagem modificou o background-imagecom o vermelho background-colorpor baixo. Mas observe que a cor do texto não foi afetada por esta propriedade adicional.

Valores

initial: o valor padrão sem mistura.
inherit: herda o modo de mesclagem do elemento pai.
: um valor que mudará a imagem de fundo dependendo de sua cor de fundo.

O valor pode ser definido como qualquer um dos seguintes (nas demonstrações abaixo, o background-coloré vermelho):

`luminosity`: a luminosidade da cor superior é preservada ao usar a saturação e o matiz da cor de fundo.

Demo

Aqui está um exemplo prático de como esses valores são interpretados dependendo de background-color:

Veja o modo de mesclagem Pen Background por CSS-Tricks (@ css-tricks) no CodePen.

Encadeando vários modos de mesclagem

Cada camada de fundo pode ter apenas um único modo de mistura, no entanto, se estivermos usando vários gradientes lineares, por exemplo, cada um deles pode ter seu próprio modo de mistura, o que torna uma exibição interessante:

Veja Pen Gradients e background-blend-mode por CSS-Tricks (@ css-tricks) em CodePen.

Isso é obtido listando esses valores na ordem da camada de fundo que você deseja efetuar:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

O primeiro gradiente linear possui o screenmodo de mesclagem, seguido pelo segundo gradiente linear differencee pela primeira imagem de fundo que foi lightenaplicada a ele.