Kleur Spesifiseer met rgb in CSS

Heel aan die begin van die handboek, toe ons kleure bestudeer het, het ek vir julle gesê dat kleur of deur 'n Engelse woord, of deur rgb, of deur # gespesifiseer kan word. Laasgenoemde twee formate stel jou in staat om enige skakering van kleur te kry. Kom ons uitvind hoe hierdie formate presies werk.

Om hierdie metodes te verstaan, moet ons eers uitvind hoe die verlangde kleur op 'n rekenaarskerm verkry word.

'n Individuele punt op die skerm (piksel) kan nie met al die kleure gloei wat benodig word nie, aangesien dit tegnies baie ingewikkeld sou wees. Elke punt op die skerm kan slegs met drie kleure gloei: rooi, groen en blou. Maar gelyktydig en in verskillende verhoudings.

Deur hierdie kleure te kombineer kan ons enige kleur kry wat ons benodig, soortgelyk aan hoe kunstenaars met verf werk: deur 'n paar kleure te meng, kry hulle 'n ander nuwe een.

Om kleure in CSS te meng, moet jy die waarde van die eienskap die sleutelwoord rgb wees, waarna jy deur kommas skel wat spesifiseer in watter verhoudings hierdie drie basiskleure geneem moet word. Die kleure self kan wissel van 0 tot 255. En nul - is die afwesigheid van kleur, en 255 is 'n suiwer kleur (byvoorbeeld, suiver rooi).

Die letters rgb staan vir red, green, blue.

Kom ons kyk na voorbeelde.

Voorbeeld

Kom ons meng suiver rooi en suiver blou kleur. Om dit te doen, stel ons die eerste waarde op 255, die tweede op 0, en die derde - op 255. Ons sal dan 'n pers kleur kry:

<p>
	teks
</p>

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

Voorbeeld

Kom ons stel nou die eerste waarde op 255, en al die ander - op nul. As gevolg daarvan sal ons suiver rooi kry:

<p>
	teks
</p>

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

Voorbeeld

So kry ons suiver groen kleur:

<p>
	teks
</p>

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

Voorbeeld

En as ons vir groen nie 255 stel nie, maar 100, dan sal ons gedeeltelik groen kry:

<p>
	teks
</p>

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

Voorbeeld

Kom ons meng al drie kleure in arbitrêre verhoudings. Kyk wat gebeur:

<p>
	teks
</p>

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

Voorbeeld

As ons al die waardes op 255 stel, dan kry ons suiver wit kleur:

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

Voorbeeld

As ons al die waardes op 0 stel, dan kry ons suiver swart kleur:

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

Praktiese Take

Deur kleur met rgb te spesifiseer, maak alle paragrawe rooi van kleur.

Deur kleur met rgb te spesifiseer, maak alle h2 groen van kleur.

Deur kleur met rgb te spesifiseer, maak alle h3 blou van kleur.

Meng suiver rooi en suiver groen. Watter kleur sal jy kry?