Sifa mix-blend-mode
Sifa mix-blend-mode inabainisha
hali ya kuchanganya rangi ya asili juu ya rangi ya msingi
au picha ya msingi.
Thamani za sifa hiyo zinafanana na hali kuu za
wahariri wa grafiki.
Kisanii
kichaguzi {
mix-blend-mode: thamani;
}
Jedwali linaonyesha thamani kuu za
sifa mix-blend-mode:
Thamani
| Thamani | Maelezo |
|---|---|
normal |
Kawaida. Hautumii kuchanganya rangi. Hali ya chaguomsingi. |
multiply |
Kuzidisha. Katika hali hii, thamani ya rangi ya msingi inazidishwa kwa thamani ya rangi iliyochanganywa. Rangi ya matokeo daima ni rangi nyeusi zaidi. |
screen |
Kuwasha. Katika hali hii, thamani za kinyume za rangi ya msingi na iliyochanganywa zinazidishwa. Kama rangi ya matokeo daima huwekwa rangi nyepesi zaidi. |
overlay |
Kufunika. Katika hali hii, rangi huzidishwa au kuwashwa kulingana na rangi ya msingi. Mchoro au rangi hufunika sauti zilizopo, huku ukiacha sehemu zilizowashwa na zile zilizokuwa giza za rangi ya msingi hazijabadilika. |
Mfano
Wacha tuone jinsi picha itakavyoonekana
ikiwa na thamani ya chaguomsingi ya sifa
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;
}
:
Mfano
Sasa hebu tubadilishe hali ya kuchanganya kuwa kuzidisha:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: multiply;
width: 400px;
height: 300px;
}
:
Mfano
Wacha tuweke sifa mix-blend-mode
thamani ya kufunika:
<div>
<img src="bg.png">
</div>
div {
background: #C8EAF5;
width: 400px;
height: 300px;
}
img {
mix-blend-mode: overlay;
width: 400px;
height: 300px;
}
:
Angalia Pia
-
sifa
background,
inayowakilisha sifa iliyofupishwa kwa msingi -
sifa
background-image,
ambayo kwa kutumia block inaweza kupewa picha ya msingi -
sifa
background-blend-mode,
ambayo kwa kutumia inaweza kuweka picha ya msingi juu ya rangi ya msingi