Īpašība background-blend-mode

Īpašība background-blend-mode nosaka fona attēla sajaukšanas režīmu ar fona krāsu vai citiem attēliem. Šajā īpašībā var norādīt arī vairākas vērtības, atdalot tās ar komatu, kuras tiks lietotas tādā pašā secībā. Īpašības vērtības ir līdzīgas galvenajiem režīmiem grafikas redaktoros.

Sintakse

selektors {
	background-blend-mode: režīmi;
}

Tabulā parādītas galvenās īpašības background-blend-mode vērtības:

Vērtības

Vērtība	Apraksts
`normal`	Normāls. Krāsu sajaukšana netiek lietota. Noklusējuma režīms.
`multiply`	Reizināšana. Šajā režīmā pamatkrāsas vērtība tiek reizināta ar uzklātās krāsas vērtību. Rezultējošā krāsa vienmēr ir tumšāka krāsa.
`screen`	Izgaismošana. Šajā režīmā tiek reizinātas apgrieztās pamatkrāsas un uzklātās krāsas vērtības. Kā rezultējošā krāsa vienmēr tiek iegūta gaišāka krāsa.
`overlay`	Pārklājums. Šajā režīmā krāsas tiek reizinātas vai izgaismotas atkarībā no pamatkrāsas. Raksti vai krāsas pārklāj esošos pikseļus, atstājot nemainīgus pamatkrāsas gaišos un tumšos apgabalus.

Piemērs

Apskatīsim, kā izskatīsies attēls ar īpašības background-blend-mode noklusējuma vērtību:

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

Piemērs

Tagad mainīsim īpašības background-blend-mode vērtību uz reizināšanu:

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

Piemērs

Iestatīsim mūsu attēlam izgaismošanas režīmu:

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

Skatiet arī

īpašība background,
kas ir saīsinājuma īpašība fonam
īpašība background-image,
ar kuru elementam var pievienot fona attēlu
īpašība mix-blend-mode,
ar kuru var uzklāt elementa krāsas uz fona
īpašība backdrop-filter,
kas ļauj uzklāt filtrus