CSS Opacitate / Transparență. Box Transparent. Transparență folosind RGBA.

Susține Lectii-Virtuale!

Box Transparent

Când se utilizează proprietatea opacity pentru a adăuga transparență pe fundalul unui element, toate elementele sale copil moștenesc aceeași transparență. Acest lucru poate face textul într-un element complet transparent, greu de citit:






Exemplu:   

div {
  opacity: 0.3;
  filter: alpha(opacity=30); /* Pentru IE8 și versiunile anterioare */
}

Transparență folosind RGBA

Dacă nu doriți să aplicați opacitate elementelor copil, cum ar fi în exemplul nostru de mai sus, folosiți valorile de culoare RGBA. Următorul exemplu stabilește opacitatea culorii de fundal și nu a textului:




Ați aflat de la capitolul nostru de culori CSS, că puteți utiliza RGB ca valoare a culorii. În plus față de RGB, puteți utiliza o valoare a culorii RGB cu un canal alfa (RGBA) - care specifică opacitatea unei culori.

O valoare de culoare RGBA este specificată cu: rgba (roșu, verde, albastru, alfa). Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet opac).

Exemplu:

div {
  background: rgba(76, 175, 80, 0.3) /* Fundal verde cu opacitate de 30% */
}