cella traparente con contenuto visibile...

[HammerFist]

mi auguro di aver scritto un titolo chiaro... io ho questo pezzo di codice:

.alpha {
background:#ffffff;
FILTER:alpha(opacity=10);
moz-opacity:.10;
opacity:.10;
height:118;
width:160;
}

mi serve per avere lo sfondo di una cella trasparente sfumata sul bianco... il mio problema è che non volgio che sia trasparente anche il contenuto della cella...testo e link... come lo risolvo il problema secondo voi? grazie

[HammerFist]

in parte ho risolto così facendo:
<div class="alpha">
<span style="position: relative;">
....
<span/>
<div/>

[HammerFist]

il problema di prima ora mi rimane con firefox...

.Stile {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;

}

<span class="Stile" style="position: relative;">
...
</span>

il testo mi rimane trasparente al pari dello sfondo...
come risolvo secondo voi?

[HammerFist]

ho trovato alcune discussioni in merito a questo problema... in alcuni si dice che non è possibile avere del testo "chiaro" in un contenitore con opacità ridotta, il altri riportano come esempio il seguente sito: http://www.pearljam.com/ ... ma dal quale non mi è del tutto chiaro il meccanismo con cui riescono a fare questo effetto... ora quello che mi domando io è: come è possibile che con ie ottengo l'effetto desiderato e ff no??? di norma mi è sempre successo il contrario... riporto di seguito l'ultima modifica al file css... magari qualcuno mi può aiutare:

#alpha {
height:118;
width:240;
background-color:#ffffff;
filter: Alpha(Opacity=10);
opacity: 0.1;
-moz-opacity:0.1;
}

#interno {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color:#ffffff;
z-index:2;
background-color: transparent;
position: relative;
}

[HammerFist]

il tutto funziona se si usa il posizionamento assoluto dei div... ma questo è una soluzione troppo limitativa... e decisamente poco funzionale... nessuno a qualke idea?

[HammerFist]

vi è la possibilità di evitare che un div non erediti le proprietà del div che lo contiene? in qualche modo, sia esso css o javascript?

[Mackey]

Anch'io fino a 5 minuti fa avevo lo stesso problema. Ho risolto in questo modo:

#text {
width:500px;
height:310px;
position:relative;
}
#t1 {
position:absolute;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
border:1px solid #AAA;
background-color:#FFF;
width:500px;
height:310px;
}
#t2 {
position:absolute;
}


<div id="text">
<div id="t1"></div>
<div id="t2">bla bla bla</div>
</div>


Funziona sia su IE 6 che su FF 2
Le posizioni assolute sono riferite al contenitore che è relativo, quindi in questo caso non è limitativo come tu dicevi.
Fammi sapere se la soluzione ti piace.
ciao