La proprietà visibility permette di controllare se gli oggetti sono opachi oppure trasparenti, ma come al solito i browser interpretano e presentano vari modi per gestire la cosa. Infatti quando uno degli elementi è traslucido, oscura in parte l'altro dietro; però utilizzando una combinazione di standard CSS utilizzati sia da FF che da IE possiamo cercare di ottener un buon risultato.
secondo le nuove norme CSS3 si introdurrà una nuova proprietà opacity, che al momento è supportata solamente dai browser mozilla. Tale proprietà può essere applicata a qualsiasi elemento HTML.
Per quanto riguarda IE si può utilizzare un filtro alfa per ottenere lo stesso effetto.
Poichè nessun browser supporta entrambe le proprietà bisogna applicarle entrambe. purtroppo funzioneranno solamente sotto piattaforma Microsoft.
codice:
CODICE CSS
#box {
background-color: #FF6600;
width: 400px;
height:300px;
}
#boxsmall {
background-color: #FFFFFF;
width: 300px;
height:200px;
margin-left:auto;
margin-right:auto;
filter: alpha(opacity=30); /* per IE/Win */
opacity:0.3; /* per Mozilla&Co. */
}
.corpo {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
Come puoi notare il codice CSS è diverso da come lo avevi scritto tu, infatti se vuoi ottenere un effetto di opacità del 60% devi scrivere opacity:0.6; , e così via.
Mentre per IE la dichiarazione corretta è: filter: alpha(opacity=60); .
Ti consiglio anche un URL http://www.w3.org/TR/2003/CR-css3-co.../#transparency
Spero di esserti stato d'aiuto.
Rispondi quotando
