CSS3: opacità (seconda opzione)

 CSS3  No Responses »
Dec 202011
 

CSS3 offre una seconda opzione per gestire la trasparenza in alternativa a quella presa in considerazione nel post precedente. Si tratta di usare la notazione RGBa, dove oltre alla percentuale del colore RGB possiamo specificare la trasparenza con il canale alfa.
Riprendendo l’esempio precedente:

body{ font-family:Verdana; font-size:75%; background-image:url(images/sky.jpg);}
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
}

lo integriamo modificando le istruzioni sul background del box in questo modo

background-color: rgba(255, 255, 255, 0.5);

dove l’ultima voce è appunto il canale alfa dell’opacità. A questo punto la domanda è sulla differenza rispetto al post precedente: nel caso dell’attributo opacity questo viene applicato allo sfondo del box e agli elementi contenuti, mentre nel caso della notazione RGBa sarà solo lo sfondo del box ad essere trasparente e non gli elementi contenuti nel box.

Ecco l’esempio

 Share

CSS3: opacità

 CSS3  No Responses »
Dec 192011
 

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

 Share