CSS rgb() functie

definitie en gebruik

CSS rgb() De functie gebruikt het rood-groen-blauwe (RGB) kleurensysteem om kleuren te specificeren. Een optionele transparantie-kanaal kan ook worden toegevoegd (dat de transparantie van de kleur aangeeft).

RGB-kleurenwaarden worden gespecificeerd via rgb(rood groen blauw) Specifiek. Elke parameter definieert de intensiteit van de kleur, wat een geheel getal tussen 0 en 255 of een percentage tussen 0% en 100% kan zijn.

Bijvoorbeeld, de waarde rgb(0 0 255) wordt weergegeven als blauw, omdat de blauwe parameter is ingesteld op de hoogste waarde (255), terwijl de andere parameters op 0 zijn ingesteld.

Opmerking:rgba() Functie is rgb() Functie-alias. Aangeraden wordt om rgb() Functie.

Voorbeeld

Definieer verschillende RGB(A) kleuren:

#p1 {achtergrondkleur:rgb(255 0 0);} /* Rood */
#p2 {achtergrondkleur:rgb(0 255 0);} /* Groen */
#p3 {achtergrondkleur:rgb(0 0 255);} /* Blauw */
#p4 {achtergrondkleur:rgb(192 192 192);} /* Grijs */
#p5 {achtergrondkleur:rgb(255 255 0);} /* Geel */
#p6 {achtergrondkleur:rgb(255 0 255);} /* Kersrood */
#p7 {achtergrondkleur:rgb(255 0 255 / 0.2);} /* Transparante kersrood */
#p8 {achtergrondkleur:rgb(0 0 255 / 50%);} /* Transparante blauw */

Probeer het zelf uit

CSS syntaxis

Absoluut waarde syntax

rgb(R G B / A)
Waarde Beschrijving
R

Verplicht. Definieert de intensiteit van de rode kleur, kan een integer tussen 0 en 255 of een percentage tussen 0% en 100% zijn.

Men kan ook none (equivalent aan 0%) gebruiken.
G

Verplicht. Definieert de intensiteit van de groene kleur, kan een integer tussen 0 en 255 of een percentage tussen 0% en 100% zijn.

Men kan ook none (equivalent aan 0%) gebruiken.
B

Verplicht. Definieert de intensiteit van de blauwe kleur, kan een integer tussen 0 en 255 of een percentage tussen 0% en 100% zijn.

Men kan ook none (equivalent aan 0%) gebruiken.
/ A

Optioneel. Vertegenwoordigt de transparenciewaarde van de kleur, 0% (of 0) betekent volledig transparant, 100% (of 1) betekent volledig ondoorzichtig.

Men kan ook none (wat represents de ontbrekende transparantie kanalen) gebruiken. De standaardwaarde is 100%.

Relatieve waarde syntax

rgb(from color R G B / A)
Waarde Beschrijving
from color

Begint met het keyword from, gevolgd door de kleurwaarde die de oorspronkelijke kleur vertegenwoordigt.

Dit is de oorspronkelijke kleur waarop de relatieve kleur gebaseerd is.
R

Verplicht. Definieert de intensiteit van de rode kleur, kan een integer tussen 0 en 255 of een percentage tussen 0% en 100% zijn.

Men kan ook none (equivalent aan 0%) gebruiken.
G

Verplicht. Definieert de intensiteit van de groene kleur, kan een integer tussen 0 en 255 of een percentage tussen 0% en 100% zijn.

Men kan ook none (equivalent aan 0%) gebruiken.
B

Verplicht. Definieert de intensiteit van de blauwe kleur, kan een integer tussen 0 en 255 of een percentage tussen 0% en 100% zijn.

Men kan ook none (equivalent aan 0%) gebruiken.
/ A

Optioneel. Vertegenwoordigt de transparenciewaarde van de kleur, 0% (of 0) betekent volledig transparant, 100% (of 1) betekent volledig ondoorzichtig.

Men kan ook none (wat represents de ontbrekende transparantie kanalen) gebruiken. De standaardwaarde is 100%.

Technische details

Versie: CSS2

Browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
rgb()
1 4 1 1 3.5
Transparantie parameter bevatende rgb()
65 79 52 12.1 52
Spaties gescheiden parameters
65 79 52 12.1 52