Kolory CSS
CSS obsługuje ponad 140 nazw kolorów, wartości HEX, wartości RGB , wartości RGBA, wartości HSL, wartości HSLA i krycie.
Kolory RGBA
Wartości kolorów RGBA są rozszerzeniem wartości kolorów RGB o kanał alfa, który określa krycie koloru.
Wartość koloru RGBA jest określona za pomocą: rgba(czerwony, zielony, niebieski, alfa). Parametr alfa to liczba z zakresu od 0,0 (w pełni przezroczysta) do 1,0 (w pełni nieprzezroczysta).
Poniższy przykład definiuje różne kolory RGBA:
Przykład
#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 */
Kolory HSL
HSL oznacza odcień, nasycenie i jasność.
Wartość koloru HSL jest określona za pomocą: hsl(odcień, nasycenie, jasność).
- Barwa to stopień na kole kolorów (od 0 do 360):
- 0 (lub 360) jest czerwone
- 120 jest zielony
- 240 jest niebieski
- Nasycenie to wartość procentowa: 100% to pełny kolor.
- Lekkość to również procent; 0% to ciemny (czarny), a 100% to biały.
Poniższy przykład definiuje różne kolory HSL:
Przykład
#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 */
Kolory HSLA
Wartości kolorów HSLA są rozszerzeniem wartości kolorów HSL o kanał alfa, który określa krycie koloru.
Wartość koloru HSLA jest określana za pomocą: hsla(odcień, nasycenie, jasność, alpha), gdzie parametr alpha określa krycie. Parametr alfa to liczba z zakresu od 0,0 (w pełni przezroczysta) do 1,0 (w pełni nieprzezroczysta).
Poniższy przykład definiuje różne kolory HSLA:
Przykład
#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 */
Nieprzezroczystość
Właściwość CSS opacity
ustawia krycie dla całego elementu (zarówno kolor tła, jak i tekst będą nieprzezroczyste/przezroczyste).
Wartość opacity
właściwości musi być liczbą z zakresu od 0,0 (w pełni przezroczysta) do 1,0 (w pełni nieprzezroczysta).
Zauważ, że powyższy tekst również będzie przezroczysty/nieprzezroczysty!
Poniższy przykład pokazuje różne elementy z nieprzezroczystością:
Przykład
#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 */