CSS farver

CSS understøtter 140 forskellige farvenavneog også seksten总值、RGB-værdier、RGBA-værdier、HSL-værdier、HSLA-værdier og uigennemskinnelighed.

RGBA-farve

RGBA-farveværdien er en udvidelse af RGB-farveværdien, med en alpha-kanal - denne kanal bestemmer farvens uigennemskinnelighed.

RGBA-farveværdien defineres som: rgba(red, green, blue, alpha) alpha Parametrene er tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (fuldstændig uigennemskinnelig).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Nedenstående eksempel definerer forskellige RGBA-farver:

Eksempel

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Rød med uigennemskinnelighed */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Grøn med uigennemskinnelighed */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Blå med uigennemskinnelighed */

Prøv det selv

HSL-farve

HSL refererer til farvetone, satuation og lysstyrke (Hue, Saturation og Lightness).

HSL-farveværdien defineres som: hsl(hue, saturation, lightness).

Farvetone er graderne på farvetonen (fra 0 til 360):

  • 0 (eller 360) er rød
  • 120 er grøn
  • 240 er blå

Saturationsgrad er en procentværdi: 100% er fuld farve.

Lysstyrke er også en procentværdi: 0% er mørk (sort), mens 100% er hvid.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Følgende eksempel definerer forskellige HSL-farver:

Eksempel

#p1 {background-color: hsl(120, 100%, 50%);}  /* Grøn */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Let grøn */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Mørk grøn */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Let grøn */

Prøv det selv

HSLA-farver

HSLA-farveværdien er en udvidelse af HSL-farveværdien med Alpha-kanal - den definerer farvens gennemsigtighed.

HSLA-farveværdien defineres af følgende parametre: hsla(hue, saturation, lightness, alpha)，hvor alpha-parametret definerer gennemsigtigheden. Alpha-parametret er et tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (ikke gennemsigtig).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Følgende eksempel definerer forskellige HSLA-farver:

Eksempel

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Grøn med gennemsigtighed */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Let grøn med gennemsigtighed */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Mørk grøn med gennemsigtighed */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Let grøn med gennemsigtighed */

Prøv det selv

Gennemsigtighed

CSS opacity Egenskabsindstillingen sætter elementets gennemsigtighed (baggrundsfarve og tekst vil være gennemsigtig/ugennemsigtig).

opacity Egenskabsværdien skal være et tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (ikke gennemsigtig).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

Bemærk, at teksten ovenfor vil være transparent/uigennemskinnelig!

Følgende eksempel viser forskellige elementer med uigennemskinnelighed:

Eksempel

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Rød med uigennemskinnelighed */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Grøn med uigennemskinnelighed */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Blå med uigennemskinnelighed */

Prøv det selv