CSS kleure
CSS ondersteun 140+ kleurname, HEX waardes, RGB waardes , RGBA waardes, HSL waardes, HSLA waardes en ondeursigtigheid.
RGBA kleure
RGBA-kleurwaardes is 'n uitbreiding van RGB-kleurwaardes met 'n alfakanaal - wat die ondeursigtigheid vir 'n kleur spesifiseer.
'n RGBA-kleurwaarde word gespesifiseer met: rgba(rooi, groen, blou, alfa). Die alfa-parameter is 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (ten volle ondeursigtig).
Die volgende voorbeeld definieer verskillende RGBA-kleure:
Voorbeeld
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
HSL Kleure
HSL staan vir Hue, Saturation and Lightness.
'n HSL-kleurwaarde word gespesifiseer met: hsl(kleur, versadiging, ligheid).
- Tint is 'n graad op die kleurwiel (van 0 tot 360):
- 0 (of 360) is rooi
- 120 is groen
- 240 is blou
- Versadiging is 'n persentasiewaarde: 100% is die volkleur.
- Ligte is ook 'n persentasie; 0% is donker (swart) en 100% is wit.
Die volgende voorbeeld definieer verskillende HSL-kleure:
Voorbeeld
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
HSLA kleure
HSLA-kleurwaardes is 'n uitbreiding van HSL-kleurwaardes met 'n alfakanaal - wat die ondeursigtigheid vir 'n kleur spesifiseer.
'n HSLA-kleurwaarde word gespesifiseer met: hsla(hue, saturation, lightness, alpha), waar die alfa-parameter die ondeursigtigheid definieer. Die alfa-parameter is 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (ten volle ondeursigtig).
Die volgende voorbeeld definieer verskillende HSLA-kleure:
Voorbeeld
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
Ondeursigtigheid
Die CSS opacity
-eienskap stel die ondeursigtigheid vir die hele element (beide agtergrondkleur en teks sal ondeursigtig/deursigtig wees).
Die opacity
eiendomswaarde moet 'n getal tussen 0.0 (ten volle deursigtig) en 1.0 (ten volle ondeursigtig) wees.
Let daarop dat die teks hierbo ook deursigtig/ondeursigtig sal wees!
Die volgende voorbeeld toon verskillende elemente met ondeursigtigheid:
Voorbeeld
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */