Proprietatea mix-blend-mode

Proprietatea mix-blend-mode stabilește modul de amestecare a culorii sursă peste culoarea de fundal sau imaginea de fundal. Valorile pentru proprietate sunt similare modurilor principale din editorile grafice.

Sintaxă

selector {
	mix-blend-mode: valori;
}

În tabel sunt prezentate valorile principale pentru proprietatea mix-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`	Luminozitate. În acest mod sunt înmulțite valorile inverse ale culorii de bază și ale culorii suprapuse. Ca rezultat, se aplică î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 părțile luminoase și întunecate ale culorii de bază.

Exemplu

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

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

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

Exemplu

Acum să schimbăm modul de amestecare la înmulțire:

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

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

Exemplu

Să setăm proprietății mix-blend-mode valoarea de suprapunere:

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

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

Vedeț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 background-blend-mode,
cu care se poate suprapune imaginea de fundal peste culoarea de fundal