Својството mix-blend-mode

Својството mix-blend-mode го поставува режимот на мешање на изворната боја на позадинската боја или позадинската слика. Вредностите за својството се аналогни на главните режими на графичките редактори.

Синтакса

селектор {
	mix-blend-mode: вредности;
}

Во табелата се претставени главните вредности за својството mix-blend-mode:

Вредности

Вредност	Опис
`normal`	Нормален. Не се користи мешање на бои. Режим по стандард.
`multiply`	Множење. Во овој режим вредноста на основната боја се множи со вредноста на споената боја. Резултантната боја секогаш претставува потемна боја.
`screen`	Осветлување. Во овој режим се множат обратните вредности на основната и споената боја. Како резултантна боја секогаш се применува посветла боја.
`overlay`	Преклопување. Во овој режим боите се множат или осветлуваат во зависност од основната боја. Шеми или бои преклопуваат постоечки пиксели, оставајќи ги непроменети светлите и темните делови на основната боја.

Пример

Ајде да видиме како ќе изгледа сликата со стандардната вредност на својството 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;
}

Пример

А сега ајде да го смениме режимот на мешање на множење:

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

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

Пример

Ајде да му зададеме на својството 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;
}

Видете исто така

својството background,
кое претставува кратенка-својство за позадината
својството background-image,
со кое на блокот може да се зададе позадинска слика
својството background-blend-mode,
со кое може да се преклопи позадинската слика на позадинската боја