CSS3: opacità

CSS3 offre la possibilità di gestire la trasparenza sui box. In questo esempio metteremo un’immagine di sfondo sul body:

body{
font-family:Verdana;
font-size:75%;
background-image:url(images/sky.jpg);
}

All’interno della pagina metteremo un box contenente del testo e poi con il css diamo alcune istruzioni di formattazione tradizionali:

	width:400px;
	height:400px;
	padding:20px;
	color:#000;
	background-color: white;

e finalmente l’opacità, con un valore che va da 0 (trasparente) a 1 opaco:

opacity:0.5;

infine dobbiamo garantire la compatibilità con ie8:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

e ie7:

filter: alpha(opacity=50);

Ecco l’esempio