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