`opacity` în CSS

Setează gradul de transparență al unui element întreg, inclusiv al tuturor copiilor săi.

Sintaxă CSS

opacity: 1;    /* complet opac (vizibil) */
opacity: 0.5;  /* 50% semi-transparent */
opacity: 0;    /* complet transparent (invizibil, dar ocupă spațiu și e clicabil!) */

Ce face `opacity`

opacity acceptă valori între 0 (complet invizibil) și 1 (complet opac).

Diferență esențială față de rgba(): în timp ce background-color: rgba(...) face doar fundalul transparent lăsând textul clar, opacity face tot elementul semi-transparent, inclusiv textul, imaginile și bordurile sale.

Este folosit frecvent pentru elemente dezactivate (:disabled { opacity: 0.5; }) sau pentru animații fluide de apariție (fade in).

Valori uzuale

Valoare	Descriere
`0.0 - 1.0`	0 este invizibil, 1 este complet opac.

Exemple

Exemplul 1: Feedback vizual pentru buton inactiv (disabled)

Arată clar utilizatorului că acțiunea nu este disponibilă.

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Efect vizual în browser

Butonul inactiv devine estompat la jumătatea intensității normale, iar cursorul arată semnul de interzis.

Greșeli frecvente

Folosirea opacity: 0 pentru a ascunde elemente interactive fără a dezactiva pointer-events: none (chiar dacă este invizibil la opacity: 0, elementul încă poate fi apăsat cu clicul și primește focus!).

Comenzi înrudite

visibility: Ascunde un element din vedere, păstrând însă golul fizic pe care acesta îl ocupă în pagină.
display (block, inline, inline-block, none): Stabilește tipul de cutie al elementului în fluxul paginii sau îl ascunde complet din document.
color: Setează culoarea textului și a elementelor decorative asociate (sublinieri, borduri implicite).

Ce face opacity