Vetia background-blend-mode

Vetia background-blend-mode përcakton mënyrën e mbivendosjes së imazhit të sfondit mbi ngjyrën e sfondit ose imazhe të tjerë. Në këtë veti mund të specifikohen gjithashtu disa vlera të ndara me presje, të cilat do të aplikohen në të njëjtin rend. Vlerat për vetinë janë analoge me mënyrat kryesore të redaktuesve grafikë.

Sintaksa

përzgjedhësi {
	background-blend-mode: mënyra;
}

Në tabelë janë paraqitur vlerat kryesore për vetinë background-blend-mode:

Vlerat

Vlera	Përshkrimi
`normal`	Normale. Nuk përdoret përzierja e ngjyrave. Mënyra e paracaktuar.
`multiply`	Shumëzim. Në këtë mënyrë, vlera e ngjyrës kryesore shumëzohet me vlerën e ngjyrës së kombinuar. Ngjyra rezultuese është gjithmonë një ngjyrë më e errët.
`screen`	Ndriçim. Në këtë mënyrë shumëzohen vlerat e anasjellta të ngjyrës kryesore dhe asaj të kombinuar. Si ngjyrë rezultuese përdoret gjithmonë ngjyra më e çelët.
`overlay`	Shtresë. Në këtë mënyrë ngjyrat shumëzohen ose ndriçohen në varësi të ngjyrës kryesore. Motivet ose ngjyrat mbivendosen mbi pixel ekzistues, duke i lënë të pandryshuara pjesët e çarta dhe të errëta të ngjyrës kryesore.

Shembull

Le të shohim se si do të duket një imazh me vlerën e paracaktuar të vetisë 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;
}

Shembull

Tani le të ndryshojmë vlerën e vetisë background-blend-mode në shumëzim:

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

Shembull

Le të vendosim për imazhin tonë mënyrën e ndriçimit:

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

Shihni gjithashtu

vetia background,
e cila paraqet një veti të shkurtuar për sfondin
vetia background-image,
me të cilën një blloku mund të ketë një imazh sfondi
vetia mix-blend-mode,
me të cilën mund të mbivendosen ngjyrat burimore mbi imazhin e sfondit
vetia backdrop-filter,
e cila lejon vendosjen e filtrave