Eienskap background-blend-mode

Die eienskap background-blend-mode spesifiseer die mengmodus van 'n agtergrondbeeld op 'n agtergrondkleur of ander beelde. In hierdie eienskap kan u ook verskeie waardes met kommas skei, wat sal toegepas word in dieselfde volgorde. Die waardes vir die eienskap is soortgelyk aan die hoof mengmodusse van grafiese redigeerders.

Sintaksis

selektor {
	background-blend-mode: modusse;
}

Die tabel toon die hoofwaardes vir die eienskap background-blend-mode:

Waardes

Waarde	Beskrywing
`normal`	Normaal. Daar word nie kleurmenging gebruik nie. Verstek modus.
`multiply`	Vermenigvuldig. In hierdie modus word die waarde van die voorgrondkleur vermenigvuldig met die waarde van die agtergrondkleur. Die resultante kleur is altyd 'n donkerder kleur.
`screen`	Uitlig. In hierdie modus word die omgekeerde waardes van die voorgrond- en agtergrondkleur vermenigvuldig. Die ligter kleur word altyd as die resultante kleur toegepas.
`overlay`	Oorvleuel. In hierdie modus word kleur vermenigvuldig of uitgelig afhangende van die voorgrondkleur. Patrone of kleure bedek die bestaande pixels, terwyl die ligte en donker areas van die voorgrondkleur onveranderd bly.

Voorbeeld

Kom ons kyk hoe die beeld sal lyk met die verstekwaarde van die eienskap 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;
}

Voorbeeld

En nou, laat ons die waarde van die eienskap background-blend-mode verander na vermenigvuldig:

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

Voorbeeld

Laat ons die uitlig-modus vir ons beeld stel:

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

Sien ook

die eienskap background,
wat 'n verkorte eienskap vir die agtergrond is
die eienskap background-image,
waarmee 'n blok 'n agtergrondprent toegeken kan word
die eienskap mix-blend-mode,
waarmee voorgrondkleure op 'n agtergrondbeeld oorgelê kan word
die eienskap backdrop-filter,
wat toelaat om filters toe te pas