Egenskapen background-blend-mode

Egenskapen background-blend-mode anger blandningsläget för en bakgrundsbild på bakgrundsfärg eller andra bilder. I denna egenskap kan du också ange flera värden separerade med kommatecken, som kommer att tillämpas i samma ordning. Värdena för egenskapen liknar de huvudsakliga lägena i grafiska redigeringsprogram.

Syntax

selektor {
	background-blend-mode: lägen;
}

I tabellen presenteras de huvudsakliga värdena för egenskapen background-blend-mode:

Värden

Värde	Beskrivning
`normal`	Normalt. Ingen färgblandning används. Standardläge.
`multiply`	Multiplikation. I detta läge multipliceras värdet på basfärgen med värdet på den kombinerade färgen. Resulterande färg är alltid en mörkare färg.
`screen`	Skärm. I detta läge multipliceras de omvända värdena för basfärgen och den kombinerade färgen. Som resulterande färg används alltid en ljusare färg.
`overlay`	Överlagring. I detta läge multipliceras eller ljusas färgerna upp beroende på basfärgen. Mönster eller färger överlagrar befintliga pixlar, medan ljusa och mörka delar av basfärgen förblir oförändrade.

Exempel

Låt oss se hur en bild kommer att se ut med standardvärdet för 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;
}

Exempel

Och låt oss nu ändra värdet för egenskapen background-blend-mode till multiplikation:

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

Exempel

Låt oss ställa in skärmläge för vår bild:

<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 även

egenskapen background,
som är en sammansatt egenskap för bakgrunden
egenskapen background-image,
som används för att sätta en bakgrundsbild på ett element
egenskapen mix-blend-mode,
som används för att blanda ett elements färger med dess bakgrund
egenskapen backdrop-filter,
som tillåter applicering av filter