CSS-de reňkleri rgb arkaly kesgitlemek

Okuw kitabynyň başynda, biz reňkleri öwrenýänimizde, men size reňki ýa-da iňlis sözü bilen, ýa-da rgb arkaly, ýa-da # arkaly kesgitlemek bolýandygyny aýtdym. Iň soňky iki format islendik çal reňk almagy hödürleýär. Geliň, bu formatlaryň nädip işleýändigini düşüneliň.

Bu usullary düşünmek üçin, ilki bilen kompýuter ekranynda gerekli reňkiň nädip alynýandygyny düşünmeli.

Aslynda, ekranyň aýratyn nokady (piksel) zerur bolan ähli reňkler bilen ýakyp bolmaýar, sebäbi bu tehniki taýdan örän kyn bolar. Ekranyň her nokady diňe üç reňk bilen ýakyp bilýär: gyzyl, ýaşyl we gök. Ýöne bir wagtda we dürli proporsiýalarda.

Bu reňkleri birikdirip, biz islendik gerekli reňkimizi alarys, şonuň ýaly bolup, suratkeşler boýaglar bilen edýär: birnäçe reňki garyşdyryp, olar ýene bir täze reňk alýarlar.

CSS-de reňkleri garyşdyrmak üçin, häsiýetiň bahasynda açar söz rgb görkezmeli, soňra bolsa vergül bilen bölüp, bu üç esasy reňki haýsy proporsiýalarda almalydygyny sanawlaýarys. Reňkleriň özleri 0-den 255-ä çenli üýtgedip bolýar. We nol - bu reňkiň ýoklugy, 255 bolsa arassa reňk (mysal üçin, arassa gyzyl).

rgb harp-larynyň özi red, green, blue diýip düşündirilýär.

Mysallar bilen göreliň.

Mysal

Geliň, arassa gyzyl we arassa gök reňkleri garyşdyralyň. Bunuň üçin birinji bahany 255, ikinjini 0, üçünjini bolsa 255 edýäris. Bizde gyrmyzy reňk çykar:

html<p>
  tekst
</p>

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

Результат:

Mysal

Geliň, indi birinji bahany 255 edeliň, galanlarynyň hemmesini - nol edeliň. Netijede arassa gyzyl reňk alarys:

html<p>
  tekst
</p>

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

Результат:

Mysal

Ine şeýlelikde arassa ýaşyl reňk alarys:

html<p>
  tekst
</p>

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

Результат:

Mysal

Eger ýaşyl üçin 255 däl-de, 100 goýsaňyz, onda bölekleýin ýaşyl reňk çykar:

html<p>
  tekst
</p>

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

Результат:

Mysal

Üç reňki hem islendik proporsiýada garyşdyralyň. Görüň, näme çykdy:

html<p>
  tekst
</p>

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

Результат:

Mysal

Eger ähli bahalary 255 etseniz, onda arassa ak reňk çykar:

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

Mysal

Eger ähli bahalary 0 etseniz, onda arassa gara reňk çykar:

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

Amaly meseleler