CSS හි rgb හරහා වර්ණය නියම කිරීම

පෙළපොත් ආරම්භයේදීම, අප වර්ණ අධ්‍යයනය කරන විට, මම ඔබට පැවසුවේ වර්ණය නම් කළ හැකි ආකාරය ඉංග්‍රීසි වචනයකින් හෝ rgb හරහා, හෝ # හරහා යන්නයි. අවසාන ආකාර දෙක ඕනෑම සෙවනැල්ලක වර්ණයක් ලබා ගැනීමට ඉඩ සලසයි. අපි මෙම ආකෘති නිශ්චිතව ක්‍රියා කරන ආකාරය තේරුම් ගනිමු.

මෙම ක්‍රම තේරුම් ගැනීම සඳහා, පළමුව අපට පරිගණක තිරය මත අවශ්‍ය වර්ණය ලැබෙන ආකාරය තේරුම් ගැනීමට අවශ්‍ය වේ.

ඇත්ත වශයෙන්ම, තිරයේ වෙනම ලක්ෂයක් (පික්සල්) අවශ්‍ය සියලුම වර්ණ විහිදිය නොහැක, මන්ද එය තාක්ෂණිකව ඉතා කණගාටුදායක වනු ඇත. තිරයේ සෑම ලක්ෂයක්ම විහිදිය හැක්කේ රතු, කොළ සහ නිල් යන වර්ණ තුනට පමණි. නමුත් එකවර සහ විවිධ සමානුපාත වලින්.

මෙම වර්ණ ඒකාබද්ධ කිරීමෙන් අපට ඕනෑම අවශ්‍ය වර්ණයක් ලබා ගත හැකිය, චිත්‍ර ශිල්පීන් රෝග වර්ග සමඟ කරන ආකාරයටම: වර්ණ කිහිපයක් මිශ්‍ර කිරීමෙන් ඔවුන්ට තවත් අලුත් වර්ණයක් ලැබේ.

CSS හි වර්ණ මිශ්‍ර කිරීම සඳහා, ගුණාංගයේ අගය ලෙස rgb යන යතුරු වචනය දැක්විය යුතුය, ඉන් පසුව කොමාවකින් වෙන් කර මෙම මූලික වර්ණ තුන ගත යුතු සමානුපාතයන් දැක්විය යුතුය. ස්වයං වර්ණ 0 සිට 255 දක්වා වෙනස් විය හැකිය. එසේම ශුන්‍ය - එනම් වර්ණය නොමැති වීම, සහ 255 යනු පිරිසිදු වර්ණයයි (උදාහරණයක් ලෙස, පිරිසිදු රතු).

අකුරු rgb විස්තර කරන්නේ රතු, කොළ, නිල් ලෙසයි.

උදාහරණ මගින් බලමු.

උදාහරණය

අපි පිරිසිදු රතු සහ පිරිසිදු නිල් වර්ණ මිශ්‍ර කරමු. මේ සඳහා පළමු අගය 255 ද, දෙවන අගය 0 ද, තුන්වන අගය - 255 ද වේ. අපට දම් වර්ණයක් ලැබෙනු ඇත:

html<p>
  පෙළ
</p>

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

Результат:

උදාහරණය

දැන් අපි පළමු අගය 255 ද, අනෙකුත් සියල්ල - ශුන්‍ය ද වෙනස් කරමු. එහි ප්‍රතිඵලයක් ලෙස පිරිසිදු රතු වර්ණය ලැබෙනු ඇත:

html<p>
  පෙළ
</p>

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

Результат:

උදාහරණය

මේ ආකාරයට පිරිසිදු කොළ වර්ණය ලැබේ:

html<p>
  පෙළ
</p>

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

Результат:

උදාහරණය

කොළ සඳහා 255 වෙනුවට 100 සැකසුවහොත්, අර්ධ වශයෙන් කොළ වර්ණයක් ලැබෙනු ඇත:

html<p>
  පෙළ
</p>

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

Результат:

උදාහරණය

වර්ණ තුනම අත්තනෝමතික සමානුපාත වලින් මිශ්‍ර කරමු. ලැබෙන දේ බලන්න:

html<p>
  පෙළ
</p>

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

Результат:

උදාහරණය

සියලුම අගයන් 255 වෙනුවට සැකසුවහොත්, පිරිසිදු සුදු වර්ණයක් ලැබෙනු ඇත:

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

උදාහරණය

සියලුම අගයන් 0 වෙනුවට සැකසුවහොත්, පිරිසිදු කළු වර්ණයක් ලැබෙනු ඇත:

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

ප්‍රායෝගික කාර්යයන්