Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite modificarea transparentei elementului.
IE8 si versiuni anterioare folosesc o varianta alternativa, proprietatea filter.

- Sintaxa:

filter: alpha(opacity=X);     /* pt. IE */
opacity: X;

- X - reprezinta o valoare intre 0 (complet transparent) si 1.0 (fara transparenta).

1) Exemplu, un <div> cu o transparenta CSS de 40%:

<style type="text/css"><!--
#dv {
 background-color:blue;
 width:200px;
 height:100px;
 filter:alpha(opacity=40);     /* pt. IE */
 opacity:0.4;
}
--></style>

<div id="dv">Un continut oarecare ...</div>

Rezultat:

Un continut oarecare ...

2) Exemplu, seteaza opacitate 50% la o imagine:

<style type="text/css"><!--
#im {
 filter:alpha(opacity=50);     /* pt. IE */
 opacity:0.5;
}
--></style>

<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160" id="im" />

Rezultat:

3) Exemplu, efect imagine transparenta 50%, iar la mouseover 100%:

<style type="text/css"><!--
#im2 {
 filter:alpha(opacity=50);     /* pt. IE */
 opacity:0.5;
}
#im2:hover {
 filter:alpha(opacity=100);     /* pt. IE */
 opacity:1;
}
--></style>

<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160" id="im2" />

Rezultat (pozitionati mouse-ul peste imaginea de mai jos):

4) Continut intr-un DIV care la mouseover este acoperit cu un alt <div> transparent (DIV-ul transparent trebuie sa fie gol, adaugat in primul, si setat cu: position:absolute;):

<style type="text/css"><!--
#trans {
 display:none;
 position:absolute;
 top:2%;
 left:2%;
 width:96%;
 height:95%;
 background-color:#07fe08;
 filter:alpha(opacity=50);     /* pt. IE */
 opacity:0.5;
}
#cnt {
 position:relative;
 background:#e7e8fe;
 width:300px;
 height:200px;
 border:1px solid blue;
 padding:20px;
}
#cnt:hover #trans { display:block; }
--></style>

<div id="cnt">
 <div id="trans"></div>
 Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.
<img src="css3.jpg" alt="CSS3 opacity" width="160" height="98" />
</div>

Rezultat:

Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate. CSS3 opacity