Najnowsze tutoriale tworzenie stron internetowych
 

CSS Zabarwienie

❮ Poprzedni Następny Rozdział ❯

Kolory CSS3

CSS obsługuje nazw kolorów, szesnastkowej i kolorów RGB.

Ponadto, CSS3 wprowadza również:

  • kolorów RGBA
  • HSL kolory
  • HSLA kolory
  • nieprzezroczystość

Pomoc Browser

Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje wartości koloru CSS3 / nieruchomość.

Nieruchomość
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
nieprzezroczystość 4,0 9,0 2,0 3,1 10,1

RGBA kolory

Wartości kolorów RGBA są przedłużeniem wartości kolorów RGB z alpha kanału - który określa krycie kolorem.

Wartość koloru RGBA jest określona: RGBA (czerwony, zielony, niebieski, alpha ). alpha parametr jest liczbą z przedziału od 0,0 (całkowicie przezroczysty) i 1,0 (całkowicie nieprzezroczysta).

rgba (255, 0, 0, 0,2);
rgba (255, 0, 0, 0,4);
rgba (255, 0, 0, 0,6);
rgba (255, 0, 0, 0,8);

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 */
Spróbuj sam "

Kolory HSL

HSL oznacza odcień, nasycenie i lekkości.

Wartość koloru HSL jest określona: HSL (odcień, nasycenie, lekkość).

  1. Barwa jest stopień na kole kolorów (od 0 do 360):
    • 0 (lub 360) jest czerwony
    • 120 jest zielony
    • 240 jest niebieski
  2. Nasycenie jest procentowa wartość: 100% jest w pełnym kolorze.
  3. Lekkość jest również odsetek; 0% jest ciemny (czarny) i 100% jest biały.
HSL (0, 100%, 30%);
HSL (0, 100%, 50%);
HSL (0, 100%, 70%);
HSL (0, 100%, 90%);

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 */
Spróbuj sam "

HSLA Kolory

Wartości kolorów HSLA są przedłużeniem wartości kolorów HSL z alpha kanału - który określa krycie kolorem.

Wartość koloru HSLA jest określona: HSLA (odcień, nasycenie, lekkości, alpha ), gdzie alpha parametr definiuje zadymienia. alpha parametr jest liczbą z przedziału od 0,0 (całkowicie przezroczysty) i 1,0 (całkowicie nieprzezroczysta).

HSLA (0, 100%, 30%, 0,3);
HSLA (0, 100%, 50%, 0,3);
HSLA (0, 100%, 70%, 0,3);
HSLA (0, 100%, 90%, 0,3);

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 */
Spróbuj sam "

Nieprzezroczystość

Nieruchomość CSS3 krycie ustawia krycie dla określonej wartości RGB.

Wartość właściwości krycie musi być liczbą z przedziału od 0,0 (całkowicie przezroczysty) i 1,0 (całkowicie nieprzezroczysta).

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;

Należy zauważyć, że powyższy tekst będzie również nieprzezroczyste.

Poniższy przykład pokazuje różne wartości RGB z kryciem:

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 */
Spróbuj sam "

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»


❮ Poprzedni Następny Rozdział ❯