Egenskapen background-blend-mode

Egenskapen background-blend-mode angir blandingsmodus for bakgrunnsbilde på bakgrunnsfarge eller andre bilder. I denne egenskapen kan man også angi flere verdier separert med komma, som vil bli brukt i samme rekkefølge. Verdiene for egenskapen ligner de viktigste modusene i grafiske redigeringsprogrammer.

Syntaks

velger {
	background-blend-mode: moduser;
}

Tabellen viser hovedverdiene for egenskapen background-blend-mode:

Verdier

Verdi	Beskrivelse
`normal`	Normal. Bruker ikke fargeblanding. Standard modus.
`multiply`	Multiplisering. I denne modusen multipliseres verdien av grunnfargen med verdien av den sammenflettede fargen. Resultatfargen er alltid en mørkere farge.
`screen`	Skjermlys. I denne modusen multipliseres de omvendte verdiene av grunnfargen og den sammenflettede fargen. Som resultatfarge brukes alltid en lysere farge.
`overlay`	Overleiring. I denne modusen multipliseres eller lyses fargene opp avhengig av grunnfargen. Mønstre eller farger overleirer eksisterende piksler og lar de lyse og mørke områdene av grunnfargen være uendret.

Eksempel

La oss se hvordan bildet vil se ut med standardverdien for egenskapen 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;
}

Eksempel

La oss nå endre verdien for egenskapen background-blend-mode til multiplisering:

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

Eksempel

La oss sette skjermlys-modus for bildet vårt:

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

Se også

egenskapen background,
som er en sammentreningsegenskap for bakgrunn
egenskapen background-image,
som kan brukes til å sette bakgrunnsbilde på et element
egenskapen mix-blend-mode,
som kan brukes til å overleire kildefarger på bakgrunnsbildet
egenskapen backdrop-filter,
som tillater å legge på filtre