Sifa ya background-blend-mode

Sifa background-blend-mode inabainisha hali ya kuwekewa picha ya usuli kwenye rangi ya usuli au picha nyingine. Katika sifa hii pia inaweza kubainisha maadili kadhaa yaliyotenganishwa kwa koma, ambayo yatatumika kwa mpango huo huo. Maadili ya sifa hiyo yanafanana na hali kuu za hakikaliaji za picha.

Kirai cha Msingi

csskichagua {
  background-blend-mode: hali;
}

Katika jedwali linaonyesha maadili makuu ya sifa background-blend-mode:

Maadili

Thamani	Maelezo
`normal`	Kawaida. Hautumii kuchanganya rangi. Hali ya msingi.
`multiply`	Kuzidisha. Katika hali hii thamani ya rangi ya msingi inazidishwa kwa thamani ya rangi iliyochanganywa. Rangi ya matokeo daima huwa rangi nyeusi zaidi.
`screen`	Kuwasha mwanga. Katika hali hii thamani za kinyume za rangi ya msingi na iliyochanganywa zinazidishwa. Kama rangi ya matokeo daima huwa rangi nyepesi zaidi.
`overlay`	Kufunika. Katika hali hii rangi huongezeka au huangazwa kulingana na rangi ya msingi. Miraba au rangi hufunika saikseli zilizopo, ukiacha bila kubadilika sehemu zenye mwanga na za giza za rangi ya msingi.

Mfano

Wacha tuone jinsi picha itakavyoonekana ikiwa na thamani ya msingi ya sifa background-blend-mode:

html<div id="elem"></div>

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

Результат:

Mfano

Sasa hebu tubadilishe thamani ya sifa background-blend-mode kuwa kuzidisha:

html<div id="elem"></div>

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

Результат:

Mfano

Wacha tuweke kwa picha yetu hali ya kuwasha mwanga:

html<div id="elem"></div>

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

Результат:

Angalia Pia

sifa background,
inayowakilisha sifa fupi ya usuli
sifa background-image,
kwa kutumia ambayo kizuizi kinaweza kupewa picha ya usuli
sifa mix-blend-mode,
kwa kutumia ambayo inaweza kuwekewa rangi za asili kwenye picha ya usuli
sifa backdrop-filter,
ambayo inaruhusu kuwekewa vichujio