Kubainisha Rangi Kupitia rgb katika CSS

Mwanzoni kabisa mwa kitabu cha maongozo, tulipokuwa tunasoma rangi, niliwaambia kuwa rangi inaweza kubainishwa ama kwa neno la Kiingereza, ama kupitia rgb, ama kupitia #. Miundo miwili ya mwisho inakuwezesha kupata rangi ya kiwango chochote cha ukoo. Hebu tuchambue jinsi miundo hii inavyofanya kazi haswa.

Ili kuelewa njia hizi, kwanza kabisa tunahitaji kuchambua jinsi rangi inayohitajika inavyopatikana kwenye skrini ya kompyuta.

Kwa kweli nukta tofauti ya skrini (pikseli) haiwezi kung'aa kwa rangi zote zinazohitajika, kwani hii kikitamaduni ingekuwa ngumu sana. Kila nukta ya skrini inaweza kung'aa kwa rangi tatu tu: nyekundu, kijani na bluu. Lakini wakati huo huo na kwa viwango tofauti.

Kuchanganya rangi hizi tunaweza kupata rangi yoyote tunayohitaji sawa na jinsi wachoraji wanavyofanya kwa rangi: wakichanganya rangi kadhaa wanapata nyingine mpya.

Kuchanganya rangi katika CSS unahitaji kwa thamani ya sifa onyesha neno kuu rgb, baada ya hapo orodhesha kwa kutumia koma ikiwaonyesha kwa viwango gani inahitajika kuchukua hizi rangi tatu za msingi. Rangi zenyewe zinaweza kubadilika kutoka 0 hadi 255. Na sifuri - ni ukosefu wa rangi, na 255 ni rangi safi (kwa mfano, nyekundu safi).

Herufi zenyewe rgb zinafasiriwa kama red, green, blue.

Tutaangalia kwa mifano.

Mfano

Wacha tuchanganye rangi nyekundu safi na bluu safi. Kwa kufanya hivyo thamani ya kwanza tunaweka kuwa 255, ya pili 0, na ya tatu - 255. Tutapata rangi ya zambarau:

html<p>
  maandishi
</p>

cssp {
  color: rgb(255, 0, 255);
}

Результат:

Mfano

Sasa tuweke thamani ya kwanza kuwa 255, na zote zingine - kuwa sifuri. Kwa matokeo tutapata rangi nyekundu safi:

html<p>
  maandishi
</p>

cssp {
  color: rgb(255, 0, 0);
}

Результат:

Mfano

Hivi ndivyo tutakavyopata rangi kijani safi:

html<p>
  maandishi
</p>

cssp {
  color: rgb(0, 255, 0);
}

Результат:

Mfano

Na kama kwa kijani hutaki 255, bali 100, basi itatokea rangi kijani kwa sehemu:

html<p>
  maandishi
</p>

cssp {
  color: rgb(0, 100, 0);
}

Результат:

Mfano

Wacha tuchanganye rangi zote tatu kwa viwango vya kiholela. Angalia, nini kilichotokea:

html<p>
  maandishi
</p>

cssp {
  color: rgb(200, 100, 125);
}

Результат:

Mfano

Kama ukiweka thamani zote kuwa 255, basi utapata rangi nyeupe safi:

cssp {
  color: rgb(255, 255, 255);
}

Mfano

Kama ukiweka thamani zote kuwa 0, basi utapata rangi nyeusi safi:

cssp {
  color: rgb(0, 0, 0);
}

Kazi za Vitendo