`mix-blend-mode, background-blend-mode și isolation` în CSS

Tranziții și Animații CSS3+ (Chrome 41, Firefox 32, Safari 8)

Amestecă culorile unui element cu ce se află în spatele lui, ca modurile de amestecare (blend modes) din programele de grafică.

Sintaxă CSS

mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: difference;
background-blend-mode: overlay;
isolation: isolate;

Ce face `mix-blend-mode, background-blend-mode și isolation`

mix-blend-mode stabilește cum se combină pixelii unui element cu pixelii de sub el. multiply întunecă (alb devine transparent), screen luminează (negru devine transparent), difference inversează culorile acolo unde se suprapun.

background-blend-mode face același lucru, dar doar între straturile de fundal ale aceluiași element (de exemplu o imagine și o culoare de fundal), fără să afecteze conținutul din spate.

isolation: isolate creează un context de stivuire nou pe un părinte: amestecarea copiilor se oprește la acel părinte și nu mai ajunge la fundalul paginii.

Valori uzuale

Valoare	Descriere
`normal`	Fără amestecare (valoarea implicită).
`multiply`	Înmulțește culorile; rezultatul e mai închis. Albul dispare.
`screen`	Inversul lui multiply; rezultatul e mai deschis. Negrul dispare.
`overlay`	Combinație între multiply și screen; crește contrastul.
`difference`	Scade culorile una din alta; textul alb pe fundal deschis devine închis.
`isolation: isolate`	Limitează amestecarea la elementul părinte.

Exemple

Exemplul 1: Logo cu fundal alb integrat pe un fundal colorat

Un logo JPG cu fundal alb pare decupat pe o secțiune bej.

.sectiune-parteneri {
  background: #fef3c7;
}
.sectiune-parteneri img {
  mix-blend-mode: multiply;
}

Efect vizual în browser

Dreptunghiul alb din jurul logoului dispare, iar literele logoului apar direct pe fundalul bej. Culorile închise ale logoului rămân neschimbate.

Exemplul 2: Imagine colorizată cu albastru, doar din fundal

background-blend-mode amestecă fotografia cu culoarea de fundal a aceluiași element.

.hero-cluj {
  background-color: #1d4ed8;
  background-image: url(cluj-panorama.jpg);
  background-size: cover;
  background-blend-mode: luminosity;
  color: white;
  min-height: 320px;
}