Opacitate - CSS-Tricks | Almanah CSS 2025

opacityProprietatea în CSS specifică modul în care un element este transparent.

Utilizare de bază:

div ( opacity: 0.5; )

Opacitatea are o valoare inițială implicită de 1 (100% opacă). Opacitatea nu este moștenită, ci pentru că părintele are opacitate care se aplică la tot ceea ce se află în el. Nu puteți face un element copil mai puțin transparent decât părintele, fără o înșelăciune. Valorile sunt un număr de la 0 la 1 care reprezintă opacitatea canalului (canalul „alfa”). Când un element are o valoare 0, elementul este complet invizibil; o valoare de 1 este complet opacă (solidă).

Verificați acest stilou!

Compatibilitate IE

Dacă doriți ca opacitatea să funcționeze în toate versiunile IE, ordinea ar trebui să fie după cum urmează:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Dacă nu utilizați această comandă, IE8-as-IE7 nu aplică opacitatea, deși IE8 și un IE7 pur o fac.

Notă privind contextele de stivuire

Dacă opacityeste poziționat un element cu și o valoare mai mică de 1, z-indexproprietatea se aplică așa cum este descris în CSS2.1, cu excepția faptului că autovaloarea este tratată ca 0, deoarece este întotdeauna creat un nou context de stivuire.

Opacitatea poate fi folosit ca o alternativă la visibilityproprietatea: visibility: hidden;este la fel ca opacity: 0;.