Lastnost background-blend-mode

Lastnost background-blend-mode določa način mešanja ozadne slike z ozadno barvo ali drugimi slikami. V tej lastnosti lahko tudi določite več vrednosti, ločenih z vejico, ki se bodo uporabljale v enakem vrstnem redu. Vrednosti za lastnost so podobne osnovnim načinom grafičnih urejevalnikov.

Sintaksa

selektor {
	background-blend-mode: načini;
}

V tabeli so predstavljene osnovne vrednosti za lastnost background-blend-mode:

Vrednosti

Vrednost	Opis
`normal`	Običajno. Mešanje barv se ne uporablja. Privzeti način.
`multiply`	Množenje. V tem načinu se vrednost osnovne barve pomnoži z vrednostjo mešane barve. Končna barva je vedno temnejša barva.
`screen`	Svetljenje. V tem načinu se pomnožijo obratne vrednosti osnovne in mešane 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 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;
}

Primer

Zdaj pa spremenimo vrednost lastnosti background-blend-mode na množenje:

<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;
}

Primer

Nastavimo naši sliki način svetljenja:

<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;
}

Glejte tudi

lastnost background,
ki je okrajšava za lastnosti ozadja
lastnost background-image,
s katero lahko bloku določite ozadno sliko
lastnost mix-blend-mode,
s katero lahko mešate osnovne barve z ozadno sliko
lastnost backdrop-filter,
ki omogoča uporabo filtrov