Ultimele tutoriale de dezvoltare web
 

CSS colorate

❮ Anterior Urmatorul capitol ❯

Culori CSS3

CSS acceptă nume de culori, hexazecimal și culori RGB.

În plus, CSS3 introduce, de asemenea:

  • culori RGBA
  • culori HSL
  • culori HSLA
  • opacitate

Suport pentru browser-

Numerele din tabel specifica prima versiune de browser care acceptă pe deplin valorile de culoare CSS3 / proprietate.

Proprietate
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
opacitate 4 9 2.0 3.1 10.1

RGBA Culori

Valori de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un alpha canal - care specifică opacitatea pentru o culoare.

O valoare de culoare RGBA este specificat cu: rgba(red, green, blue, alpha ) . alpha Parametrul este un număr între 0.0 (fully transparent) și 1,0 (fully opaque) .

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

Următorul exemplu definește diferite culori RGBA:

Exemplu

#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 */
Încearcă - l singur »

HSL Culori

HSL standuri pentru Hue, Saturation si Lightness.

O valoare de culoare HSL este specificat cu: hsl(hue, saturation, lightness) .

  1. Hue este un grad pe roata de culoare (from 0 to 360) :
    • 0 (or 360) este roșu
    • 120 este verde
    • 240 este albastru
  2. Saturația reprezintă o valoare procentuală: 100% este culoarea completă.
  3. Lightness este, de asemenea, un procent; 0% este întuneric (black) și 100% este de culoare albă.
hsl(0, 100%, 30%) ;
hsl(0, 100%, 50%) ;
hsl(0, 100%, 70%) ;
hsl(0, 100%, 90%) ;

Următorul exemplu definește diferite culori HSL:

Exemplu

#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 */
Încearcă - l singur »

HSLA Culori

Valori de culoare HSLA sunt o extensie a valorilor de culoare HSL cu un alpha canal - care specifică opacitatea pentru o culoare.

O valoare de culoare HSLA este specificat cu: hsla(hue, saturation, lightness, alpha ) , unde alpha parametrul definește opacitatea. alpha Parametrul este un număr între 0.0 (fully transparent) și 1,0 (fully opaque) .

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

Următorul exemplu definește diferite culori HSLA:

Exemplu

#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 */
Încearcă - l singur »

Opacitate

Proprietatea CSS3 opacitate setează opacitatea pentru o valoare RGB specificată.

Valoarea proprietății de opacitate trebuie să fie un număr între 0.0 (fully transparent) și 1,0 (fully opaque) .

rgb(255, 0, 0) ; opacitate: 0,2;
rgb(255, 0, 0) ; opacitate: 0,4;
rgb(255, 0, 0) ; opacitate: 0,6;
rgb(255, 0, 0) ; opacitate: 0,8;

Observați că textul de mai sus va fi, de asemenea, opace.

Exemplul următor prezintă valori RGB diferite cu opacitate:

Exemplu

#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 */
Încearcă - l singur »

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»


❮ Anterior Urmatorul capitol ❯