Proprietatea opacity în CSS: ghid de utilizare și soluții pentru compatibilitate cross-browser

Efectele de transparență vizuală sunt extrem de populare în web design, fiind utilizate frecvent pentru meniuri plutitoare, efecte de suprapunere la trecerea cursorului (hover) sau casete modale. În CSS, controlul transparenței unui element se realizează prin proprietatea opacity.

Înainte ca specificația CSS3 să fie adoptată uniform de toate motoarele de randare, realizarea unui efect de opacitate compatibil cu toate browserele necesita utilizarea unor filtre specifice și a prefixelor de producător.

Codul CSS cross-browser pentru transparență

Pentru a asigura o compatibilitate completă, inclusiv cu versiunile istorice de Internet Explorer și versiunile timpurii de Mozilla Gecko, se recomandă următoarea structură:

.clasa {
  /* Internet Explorer 5.5 - 8 */
  filter: alpha(opacity=60);

  /* Mozilla 1.6 și browsere vechi pe motor Gecko */
  -moz-opacity: 0.6;

  /* Safari 1.x și browsere vechi bazate pe KHTML */
  -khtml-opacity: 0.6;

  /* Proprietatea standard CSS3 (browsere moderne) */
  opacity: 0.6;
}

Cum funcționează valorile de transparență

• Sintaxa standard (opacity): Acceptă valori numerice cuprinse între 0.0 (element complet transparent / invizibil) și 1.0 (element complet opac). Astfel, valoarea 0.6 corespunde unei opacități de 60%.
• Filtrul proprietar Microsoft (filter: alpha(...)): În vechiul Trident (motorul IE), valoarea este exprimată ca procent întreg de la 0 la 100 (ex. opacity=60).

Diferența importantă între opacity și rgba()

Un aspect crucial de reținut atunci când folosești opacity este că transparența se moștenește pe toate elementele copil aflate în interiorul containerului. Dacă aplici opacity: 0.6; pe un bloc care conține text sau imagini, atât fundalul, cât și textul vor deveni semitransparente, ceea ce poate reduce lizibilitatea.

Dacă scopul tău este să faci doar fundalul transparent, păstrând textul 100% clar și opac, soluția modernă optimă este utilizarea culorilor cu canal alfa:

.container-modern {
  /* Doar fundalul are 60% opacitate, textul rămâne perfect opac */
  background-color: rgba(0, 0, 0, 0.6);
}