Savybė background-blend-mode

Savybė background-blend-mode nustato fono paveikslėlio užkloties režimą ant fono spalvos ar kitų paveikslėlių. Šioje savybėje taip pat galima nurodyti kelias reikšmes atskirtas kableliais, kurios bus taikomos ta pačia tvarka. Reikšmės savybei yra analogiškos pagrindiniams režimams grafinėse programose.

Sintaksė

selektorius {
	background-blend-mode: režimai;
}

Lentelėje pateikiamos pagrindinės savybės background-blend-mode reikšmės:

Reikšmės

Reikšmė	Aprašas
`normal`	Normalus. Nenaudojamas spalvų maišymas. Numatytoji režimo reikšmė.
`multiply`	Dauginimas. Šiame režime pagrindinės spalvos reikšmė dauginama iš užklotos spalvos reikšmės. Gauta spalva visada yra tamsesnė spalva.
`screen`	Šviesinimas. Šiame režime dauginamos atvirkštinės pagrindinės ir užklotos spalvų reikšmės. Kaip gaunama spalva visada taikoma šviesesnė spalva.
`overlay`	Užklotis. Šiame režime spalvos dauginamos arba šviesinamos priklausomai nuo pagrindinės spalvos. Raštai ar spalvos užklumpa esamus pikselius, palikdamos nepakitusias šviesias ir tamsias pagrindinės spalvos sritis.

Pavyzdys

Pažiūrėkime, kaip atrodys paveikslėlis su numatytąja savybės background-blend-mode reikšme:

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

Pavyzdys

Dabar pakeiskime savybės background-blend-mode reikšmę į dauginimą:

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

Pavyzdys

Nustatykime mūsų paveikslėliui šviesinimo režimą:

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

Taip pat žiūrėkite

savybė background,
kuri yra sutrumpinta foną apibrėžianti savybė
savybė background-image,
kuria blokui galima nustatyti fono paveikslėlį
savybė mix-blend-mode,
kuria galima užkloti pirminės spalvas ant fono paveikslėlio
savybė backdrop-filter,
kuri leidžia užkloti filtrus