I CSS hanno molti comandi che possono essere utilizzati per abbellire le nostre pagine web. Uno di questi è il comando dedicato alla trasparenza degli oggetti. Eccovi un piccolo esempio pratico per capirne il funzionamento.Risultato finale: Sfondo trasparente con i CSS.

Ed ecco il foglio di stile:

body {background-image:url(img/052.jpg);
background-repeat:no-repeat;}
#sfondo{width:600px;}
#menu {list-style:none;margin:0px;padding:0px;}
#menu li a{filter:alpha(opacity="90");
-moz-opacity:0.9;opacity: 0.9;
background-color: #FF0000;
padding:15px;
text-decoration: none;
color: #000;
float:left;}
#menu li a:hover{filter:alpha(opacity="60");
-moz-opacity: 0.6;
opacity:0.6;
background-color: #FF0000;
text-decoration: none;
color:#FFF;}

E qui il codice della pagina HTML:
<div id="sfondo">
<ul id="menu">
<li>Prova Link A</li>
<li>Prova Link B</li>
<li>Prova Link C</li>
<li>Prova Link D</li>
</ul></div>

I valori possibili di opacity si limitano al valore attribuibile alla classe; in questo caso il valore massimo è 1.0 mentre il minimo 0.0, di conseguenza per una trasparenza del 50% dovremmo inserire un valore di 0.5. Il parametro -moz-opacity è dedicato alle vecchie versioni di Firefox; Filter Alpha invece server per Internet Explorer e specularmente i valori vanno da 0 a 100, fra l’altro abbiamo una piena compatibilità già con IE 5, quindi direi che questa proprietà può essere utilizzata senza alcuna apprensione.Si è posto il problema dell’ereditarietà del contenuto, risolvibile impostandone il posizionamento come assoluto e settando in maniera corretta lo z-index.