Veturia mix-blend-mode

Veturia mix-blend-mode vendos mënyrën e bashkimit të ngjyrës burimore mbi ngjyrën e sfondit ose imazhin e sfondit. Vlerat për veturinë janë analoge me mënyrat kryesore të editorëve grafikë.

Sintaksa

selector {
	mix-blend-mode: vlerat;
}

Në tabelë janë paraqitur vlerat kryesore për veturinë mix-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 resultante ë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ë rezultante përdoret gjithmonë ngjyra më e çelur.
`overlay`	Shtresëzim. Në këtë mënyrë ngjyrat shumëzohen ose ndriçohen në varësi të ngjyrës kryesore. Motivet ose ngjyrat mbivendosen mbi pixel-at 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ë veturisë mix-blend-mode:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Shembull

Tani le të ndryshojmë mënyrën e bashkimit në shumëzim:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Shembull

Le t'i japim veturisë mix-blend-mode vlerën e shtresëzimit:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

Shihni gjithashtu

veturia background,
që përfaqëson një veturi-shkurtim për sfondin
veturia background-image,
me të cilën një blloku mund t'i jepet një fotografi sfondi
veturia background-blend-mode,
me të cilën mund të vendosni një imazh sfondi mbi një ngjyrë sfondi