Proprietatea background-blend-mode

Proprietatea background-blend-mode stabilește modul de amestecare a imaginii de fundal peste culoarea de fundal sau peste alte imagini. În această proprietate se pot specifica, de asemenea, mai multe valori separate prin virgulă, care vor fi aplicate în aceeași ordine. Valorile pentru proprietate sunt analoage modurilor principale din editorile grafice.

Sintaxă

selector {
	background-blend-mode: moduri;
}

În tabel sunt prezentate valorile principale pentru proprietatea background-blend-mode:

Valori

Valoare	Descriere
`normal`	Normal. Nu se utilizează amestecarea culorilor. Modul implicit.
`multiply`	Înmulțire. În acest mod, valoarea culorii de bază este înmulțită cu valoarea culorii suprapuse. Culoarea rezultată este întotdeauna o culoare mai închisă.
`screen`	Ecran. În acest mod se înmulțesc valorile inverse ale culorii de bază și ale culorii suprapuse. Ca rezultat, se obține întotdeauna o culoare mai deschisă.
`overlay`	Suprapunere. În acest mod culorile sunt înmulțite sau deschise în funcție de culoarea de bază. Modelele sau culorile acoperă pixelii existenți, păstrând neschimbate zonele luminoase și întunecate ale culorii de bază.

Exemplu

Să vedem cum va arăta imaginea cu valoarea implicită a proprietății background-blend-mode:

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplu

Acum să schimbăm valoarea proprietății background-blend-mode la înmulțire:

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplu

Să setăm pentru imaginea noastră modul ecran:

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Veți și

proprietatea background,
care este o proprietate scurtă pentru fundal
proprietatea background-image,
cu care unui bloc i se poate atribui o imagine de fundal
proprietatea mix-blend-mode,
cu care se pot suprapune culorile sursă peste imaginea de fundal
proprietatea backdrop-filter,
care permite aplicarea de filtre