Lastnost mix-blend-mode

Lastnost mix-blend-mode določa način mešanja izvorne barve na barvo ozadja ali sliko ozadja. Vrednosti za lastnost so analogne osnovnim načinom grafičnih urejevalnikov.

Sintaksa

selektor {
	mix-blend-mode: vrednosti;
}

V tabeli so predstavljene glavne vrednosti za lastnost mix-blend-mode:

Vrednosti

Vrednost	Opis
`normal`	Običajen. Mešanje barv se ne uporablja. Privzeti način.
`multiply`	Množenje. V tem načinu se vrednost osnovne barve pomnoži z vrednostjo združene barve. Končna barva je vedno temnejša barva.
`screen`	Svetljenje. V tem načinu se pomnožijo obratne vrednosti osnovne in združene barve. Kot končna barva se vedno uporabi svetlejša barva.
`overlay`	Prekrivanje. V tem načinu se barve množijo ali svetlijo odvisno od osnovne barve. Vzorci ali barve prekrivajo obstoječe piksele, pri čemer ostanejo svetli in temni deli osnovne barve nespremenjeni.

Primer

Poglejmo, kako bo izgledala slika z privzeto vrednostjo lastnosti 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;
}

Primer

Zdaj pa spremenimo način mešanja na množenje:

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

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

Primer

Nastavimo lastnosti mix-blend-mode vrednost prekrivanja:

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

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

Glejte tudi

lastnost background,
ki je okrajšava za ozadje
lastnost background-image,
s katero lahko bloku nastavimo sliko ozadja
lastnost background-blend-mode,
s katero lahko prekrijemo sliko ozadja na barvo ozadja